vue 组件之间 的通信

组件之间通信:

同级组件之间通信:两个组件定义应用到同一个vue实例之下:

<div id="webapp" class="box">
   <my-header></my-header>
   <slid-bar class="left_nav_bar" @name-change="changename"></slid-bar>
   <table-body :data-name="aaa"></table-body>
</div>

如,webapp会创建一个实例,而slid-bar和table-body之间需要进行数据通信,下面将要把slid-bar中的数据传递给table-body

首先在sild-bar组件内部template中将要传递出来的数据传递给一个函数,

<button class="countries" @click="pagechange(\'Countries\')">countries</button>\
<button class="operators" @click="pagechange(\'Operators\')">operators</button>

在接收的函数中进行发射：

methods:{
    pagechange:function(prmt){
        this.nowpage = prmt;
        this.$emit('name-change',this.nowpage);
        //    向父组件中派发事件
    }
},

发射出来的事件需要在本组件使用时绑定，而事件的值需要在父组件或父实例中进行方法定义changename：

var vm = new Vue({
    el: '#webapp',
    data:{
        dataname:'',
        prefix: ''
    },
    methods:{
        changename:function(paramater){
            // console.log(paramater);
            this.dataname=paramater;
            //    父组件中接收事件
        }
    }
});

并且在实例中定义一个变量用来接收传递过来的参数，如上面dataname

这样就完成了子组件向父组件传递数据，之后再子组件中进行接收就可以了

Vue.component('table-body',{
    props:['dataName'],

这样在子组件里面就可以直接用这个变量了。

我们用以下几个步骤来理解组件的创建和注册：

1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。 
2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。 
3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。 
4. Vue.component()方法内部会调用组件构造器，创建一个组件实例。 
5. 组件应该挂载到某个Vue实例下，否则它不会生效。