{{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 二零二一年祝福语简短