这篇文章主要总结Vue关于组件化开发知识点，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联-专业网站定制、快速模板网站建设、高性价比黔西南州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式黔西南州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖黔西南州地区。费用合理售后完善，十载实体公司更值得信赖。
全局组件注册
Vue.component('first-component', {
data: function () {
return {
count: 0
}
},
template: ''
})data 必须是一个函数
组件模板内容必须是单个根元素
组件模板内容可以是模板字符串
全局组件可以嵌套全局组件
组件命名方式
Vue.component('first-component', {/* .... */})
// 普通标签模板中不能使用驼峰, 只能在template中使用驼峰方式
Vue.component('firstComponent', {/* .... */})局部组件注册
局部注册的组件只能在父组件中使用 ;
var vm = new Vue({
components: {
'hello-world': {
data: function () {
return {
msg: 'hello world'
}
},
template: '{{ msg }}'
}
}
})props 传递数据原则 : 单向数据流
组件内部通过 props 接收传递过来的值
Vue.component('son-com', {
props: ['msg', 'parentMsg']
template: '{{msg + "---" + parentMsg}}'
})父组件通过属性将值传递给子组件
props 属性名规则
props 传递类型
:boolean="pboolean" :arr="parr" :obj="pobj" >
Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `
{{ str }}
{{ num }}
{{ boolean }}
- {{ item }}
{{ obj.name }}
{{ obj.age }}
`
})var vm = new Vue({
el: '#app',
data: {
pstr: 'hello Vue',
pnum: 12,
pboolean: true,
parr: ['apple', 'banner', 'orange'],
pobj: {name: 'zs', age: 22}
}
})子组件向父组件传值
子组件通过自定义事件向父组件传值 $emit()
Vue.component('son-com', {
template: `
传值从第二个参数开始
`
})父组件监听子组件事件
父组件
var vm = new Vue({
el: '#app',
data: {
font: 10
},
methods: {
handle: function (val) {
this.font += 5
this.font += val // 此时的val就是 子组件传递过来的值
}
},
})非父子组件传值
单独的事件中心管理组件之间的通信
// 创建事件中心
var hub = new Vue()
// 在 mounted 中监听事件
hub.$on('eventName', fn)
hub.$off('eventName') // 销毁事件
// 在 methods 中处理事件
hub.$emit('eventName', param)组件插槽
程序错误
我是没有匹配的内容匹配页脚一次
匹配页脚两次
Vue.component('tmp-com', {
template: `
如果上面没有匹配到对应的标签就会展示默认内容
看完上述内容，是不是对总结Vue关于组件化开发知识点有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
