{{count}}' })

data必须是一个函数

组件模板内容必须是单个根元素

组件模板内容可以是模板字符串

全局组件可以嵌套全局组件

组件命名方式

Vue.component('first-component',{/*....*/})
//普通标签模板中不能使用驼峰,只能在template中使用驼峰方式
Vue.component('firstComponent',{/*....*/})

局部组件注册

局部注册的组件只能在父组件中使用;

varvm=newVue({
components:{
'hello-world':{
data:function(){
return{
msg:'helloworld'
}
},
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}}




{{obj.name}}
{{obj.age}}




`
})
varvm=newVue({
el:'#app',
data:{
pstr:'helloVue',
pnum:12,
pboolean:true,
parr:['apple','banner','orange'],
pobj:{name:'zs',age:22}
}
})

子组件向父组件传值

子组件通过自定义事件向父组件传值$emit()

Vue.component('son-com',{
template:`


点击放大父组件字体
传值从第二个参数开始
	点击放大父组件字体


`
})

父组件监听子组件事件



父组件





varvm=newVue({
el:'#app',
data:{
font:10
},
methods:{
handle:function(val){
this.font+=5
this.font+=val//此时的val就是子组件传递过来的值
}
},
})

非父子组件传值

单独的事件中心管理组件之间的通信

//创建事件中心
varhub=newVue()

//在mounted中监听事件
hub.$on('eventName',fn)
hub.$off('eventName')//销毁事件

//在methods中处理事件
hub.$emit('eventName',param)

组件插槽



程序错误


我是没有匹配的内容




匹配页脚一次


匹配页脚两次



Vue.component('tmp-com',{
template:`









如果上面没有匹配到对应的标签就会展示默认内容






`
})

到此这篇关于Vue关于组件化开发知识点详解的文章就介绍到这了,更多相关Vue组件化开发内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

热门推荐

1 退伍祝福语老师简短
2 给新娘彩礼祝福语简短
3 自由 生日祝福语简短独特
4 春节文章开头祝福语简短
5 订婚典礼文案祝福语简短
6 爷爷庆生文案祝福语简短
7 宿舍迎新祝福语简短英文
8 长辈鲜花祝福语卡片简短
9 培训机构升班祝福语简短
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短