vue局部组件和全局组件区别,vue 全局组件
本文主要介绍了vue的全局组件和局部组件的编写方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
全局组件和本地组件编写全局组件介绍编写本地组件介绍编写vue全局/本地组件
全局组件和局部组件写法
vue组件有两种，一种是全局组件，一种是局部组件。整个项目往往以全局的方式编写，针对特定页面使用的本地组件较少。
全局组件引入写法
在项目的main.js中：
从“Vue”导入Vue；
从“@/components/MyComponent.vue”导入MyComponent//导入自己编写的组件文件
vue . use(my component)；//自定义全局组件时需要vue . use()；
Vue.component(my-component ，我的组件)；//初始化组件
新Vue({
埃尔： #app ，
路由器，
组件：{
App，
我的组件
},
模板：“App/”，
});
局部组件引入写法
在需要使用组件的a.vue文件中：
模板
/模板
脚本
从“@/components/MyComponent.vue”导入MyComponent
导出默认值{
Components: {MyComponent}，//直接初始化就行，不用vue . use()；
data() {}，
方法：{}
};
/脚本
style lang=scss 范围
/风格
下面附上自定义组件的MyComponent.vue文件代码：
模板
差异
a @ click= method 1()/a
/div
/模板
脚本
从“mint-ui”导入{ MessageBox }；
导出默认值{
Data () {//组件中的参数在数据中定义
返回{
数据1: {}
};
},
Props: {//组件使用Props传递参数
值1:字符串，
值2:数字
},
方法：{//组件的计算方法
方法1 () {
}
}
};
/脚本
style lang=scss 范围
/风格
vue全局/局部组件
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
script src=js/vue.js/script
/头
身体
！-全局组件速记-
div id=example1
我的组件/我的组件
/div
脚本
vue . component( my-component ，{
模板：“分区测试1/分区”
})
新Vue({
el:#example1
})
/脚本
！-注册全局组件-
div id=example2
我的组件1/我的组件1
/div
脚本
//创建一个组件生成器
var myComponent=Vue.extend({
模板：“分区测试2/分区”
})
//注册全局组件：(Z组件名组件生成器)
//Vue.component(标记名，选项)
Vue.component(我的组件1 ，我的组件)
新Vue({
el:#example2
})
/脚本
！-注册本地组件-
div id=示例3
我的组件/我的组件
/div
div id=example4
我的组件/我的组件
/div
脚本
//创建一个组件生成器
var myComponent=Vue.extend({
模板：“div本地组件4/div”
})
//注册组件，逐渐指定组件的html标签为my-component。
Vue.component(我的组件，我的组件)
新Vue({
El:“# example 4”，
组件：{
“我的组件”:我的组件
}
})
/脚本
！-父子组件数据传输
父子关系：组件A通常在其模板中使用组件B，在这种情况下，组件A是父组件，组件B是子组件。父子组件应该分离，
组件的范围是隔离的，父组件的数据不能直接在子组件中使用。应该使用Props将数据从父组件传输到子组件，
子组件通过事件向父组件发送消息，从而实现父子组件之间的通信。
如上所述，用其他组件内的组件声明一个组件是本地注册。当向Vue实例中的组件注册组件时，
可以理解为Vue实例是一个大的父组件，其他任何注册的组件都是子组件。所以当注册一个组件时，
如果要使用Vue实例数据中的数据，应该使用props来传递Vue实例中的数据，这样Vue实例的数据就可以在组件中使用。
还可以使用v-bind将props的值动态绑定到父组件的数据。当父组件的数据更改时，子组件的数据也会相应更改。
父子：父组件通过props将父组件传递给子组件。
子-父：子组件通过事件向父组件发送消息。
-
div id=test
模板id=testProp
保险商实验所
李代表“书中的书”
p{{book.title}}/p
p{{book.desc}}/p
p{{book.author}}/p
/李
/ul
模板
测试道具：book-list=books/test-prop
/div
脚本
var TestProp=Vue.extend({
模板：" #testProp "，
道具：[图书列表]
});
定义变量测试=新Vue({
el: #test ，
数据：函数(){
返回{
书籍：[
{
标题："标题1",
desc:”描述1",
作者："作者1"
},
{
标题："标题2",
desc:”描述2",
作者："作者2"
},
{
标题："标题3",
desc:”描述3",
作者："作者3"
},
],
}
},
组件：{
测试道具：测试道具，
},
});
/脚本
/body
/html
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。