这篇文章给大家分享的是有关vue如何注册组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司主要从事网站设计、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务吉安,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
注册组件
全局组件
语法如下,组件模板需要使用一个根标签包裹起来。data必须是一个方法
Vue.component('component-name',{ template:'', data(){ return{ message:'组件的属性' } }, methods:{ } })标题
作者信息
局部组件
var com = { template:'', data(){ return{ message:'组件的属性' } }, methods:{ } } new Vue({ components:{ 'compontent-name':com } })标题
作者信息
组件通信
prop将父组件数据传给子组件
利用子组件的props选项,父组件可以向子组件传递数据,但是子组件不能求改父组件的数据。
非父子组件通信
需要使用一个空的Vue实例来管理
var bus = new Vue(); var coma = { template: '{{adata}}
', data(){ return { adata: 'a的数据' } }, methods:{ send(){ // 触发这一事件 bus.$emit('data-to-b', this.adata); } } }; var comb= { template: '{{bdata}}
', data(){ return { bdata: 'b的数据' } }, mounted(){ // 监听事件,获取a组件的数据,进行相关操作 bus.$on('data-to-b', function (msg) { this.bdata = msg; }.bind(this)); } }; new Vue({ el:'#app', components: { 'com-a': coma, 'com-b': comb } })
感谢各位的阅读!关于“vue如何注册组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!