首页 > 编程 > JavaScript > 正文

vue组件学习教程

2019-11-19 15:30:13
字体:
来源:转载
供稿:网友

在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分。

注册组件

全局组件

语法如下,组件模板需要使用一个根标签包裹起来。data必须是一个方法

Vue.component('component-name',{  template:'<div><h1>标题</h1><span>作者信息</span></div>',  data(){    return{      message:'组件的属性'    }  },  methods:{  }})

局部组件

var com = {  template:'<div><h1>标题</h1><span>作者信息</span></div>',  data(){    return{      message:'组件的属性'    }  },  methods:{  }}new Vue({  components:{    'compontent-name':com  }})

组件通信

prop将父组件数据传给子组件

 <div id='app'>   <child :msg=message></child> </div>
<script>  Vue.component('child', {    props: ['msg'],    template: '<p>{{msg}}</p>'  })  new Vue({    el: '#app',    data: {      message: '父组件数据'    }  })</script>

利用子组件的props选项,父组件可以向子组件传递数据,但是子组件不能求改父组件的数据。

非父子组件通信

需要使用一个空的Vue实例来管理

<div id='app'>  <com-a></com-a>  <com-b></com-b></div>
var bus = new Vue();var coma = {  template: '<p @click="send">{{adata}}</p>',  data(){    return {      adata: 'a的数据'    }  },  methods:{    send(){      // 触发这一事件      bus.$emit('data-to-b', this.adata);    }  }  };var comb= {  template: '<p>{{bdata}}</p>',  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  }})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表