vue如何在main.js中配置全局的通用公共组件
更新时间：2023年01月13日 14:36:59 作者：牛先森家的牛奶
这篇文章主要介绍了vue如何在main.js中配置全局的通用公共组件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
在main.js中配置全局的通用公共组件
1、在main.js中直接引入并注册
main.js引入并注册
import Loading from './components/Loading.vue';
Vue.component('Loading', Loading);2、页面中使用组件
html中使用：
<template>
<div class='wrapper'>
<Loading :ready="ready"></Loading>
</div>
</template>
export default {
name: "index",
data() {
return {
ready: false,
};
},
created() {
// 这里是为了模拟改loading的显示和隐藏用的函数
setTimeout(() => {
this.ready = true
}, 3000);
},
computed: {},
methods: {
},
};
</script>vue.js全局组件的三种方式
组件：button imageview listview等这些都是AS系统提供给我们
使用的组件；前端也有像类似于后端的组件概念。
组件的语法格式：
全局组件
Vue.component(‘组件名’,{代码的定义})
1.组件名称：
- 羊肉串法：my-comp-name ->
- 骆驼/pascal法: orderItem- 或
2.代码的定义
- 2.1 template:‘HTML代码’
- 2.2 template: 多行代码,反引号，是ECMAScript6之后提供给我们的符号;
- 2.3 template：外部定义的方式；
三种方式定义分别如下：
第一种方式，单引号（或双引号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局组件</title>
<script src="../vue.js"></script>
</head>
<!-- 做下第一个组件的案例，后续前后端 开发会用到! -->
<body>
<div id="app">
<h3>{{msg}}</h3>
<order-item></order-item>
</div>
<script>
//1.需要针对order-item这个组件做一个定义，之前没有定义的；
Vue.component('order-item',
{ template: '<ul><li>今天愚人节上课</li></ul>' }
);
let vm = new Vue({
el: '#app',
data: {
msg: '全局组件的定义!'
}
});
</script>
</body>
</html>
第二种方式反引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<order-item></order-item>
</div>
<div id="app1">
<order-item></order-item>
</div>
<script>
//1.定义组件;
Vue.component('order-item', {
template: `
<div>
<h1>反引号的全局组件</h1>
<p>京东特卖<p>
<ul><li>LV包包</li><li>GuCCI</li></ul>
</div>
`
})
//2.绑定
new Vue({
el: '#app'
});
new Vue({
el: '#app1'
});
</script>
</body>
</html>
第三种方式外部ID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<btn-counter></btn-counter>
</div>
<template id="btn-counter">
<button @click="add">单击{{count}}次</button>
</template>
<script>
//1.全局组件的定义;做个小作业做下测试；涵盖了：组件 data methods三种方式;
Vue.component('btn-counter', {
template: '#btn-counter',
data: function () { return { count: 0 } },
methods: { add: function () { this.count++ } }
})
//2.绑定;
let vm1 = new Vue({ el: '#app' });
</script>
</body>
</html>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-property-decorator使用手册，文中较详细的给大家介绍了他们的用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
Vuex unknown action type报错问题及解决
这篇文章主要介绍了Vuex unknown action type报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了Vue2响应式系统之set和delete，通过为对象收集依赖，将对象、数组的修改、删除也变成响应式的了，同时为用户提供了和方法，下文详细介绍需要的朋友可以参考一下2022-04-04
这篇文章主要给大家介绍了关于VUE3函数的声明和使用的相关资料, Vue3是一种流行的JavaScript框架,它允许开发人员构建现代化的Web应用程序,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Electron中打包应用程序及相关报错问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了前端Vue中常用rules校验规则详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了Vue Echarts实现图表的动态适配以及如何优化，在实际的前端开发过程中，动态适配是一个非常重要的问题，在数据可视化的场景下，图表的动态适配尤为重要，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue实现歌手列表字母排序，下拉滚动条侧栏排序实时更新,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
element-ui中有详细的各种表格及表格方法,下面这篇文章主要给大家介绍了关于Vue elementUI表单嵌套表格并对每行进行校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
最新评论