vue.js中的组件通信

一、父传子：使用props传递数据

1. 在子组件构建的自定义元素中添加属性：
   <Pagination :totalpage="totalPage" @sendPage="renderList"></Pagination>
2. 在子组件中通过props接收数据

export default {
  name: 'Pagination',
  props: ['totalpage',],
}

二、子传父

1. 使用自定义事件
   (1)在子组件构建的自定义元素中添加自定义事件：
   <Pagination :totalpage="totalPage" @sendPage="renderList"></Pagination>
   (2)在子组件中触发自定义事件，将数据以参数的形式发送
   this.$emit('sendPage',this.currentPage);
   (3)父组件通过执行自定义事件绑定的函数接受参数

renderList(value) {
      this.page = value;
      this.getData();
}

2. 使用v-model
   (1)在子组件构建的自定义元素中通过v-model绑定动态属性(默认为value属性)：
   <btn-compnent v-model="total"></btn-compnent>
   (2)在子组件中触发input事件，将数据以参数的形式发送
   this.$emit('input',this.count);
   (3)父组件中第①步绑定的动态属性的值会自动更新
   <p>您好,您现在的银行余额是{{total}}元</p>
   (4)v­model 其实是一个语法糖，这背后其实做了两个操作

• v-­bind 绑定一个 value 属性
• v­-on 指令给当前元素绑定 input 事件

三、非父子组件之间的通信

1. 在根vue实例中创建一个bus变量，值为空的vue实例

var app = new Vue({
  el: '#demo',
  data() {
    return {
      bus: new Vue({}),
    };
  },
})

2. 在A组件中通过根组件中的bus触发事件发送数据
   this.$root.bus.$emit('transfer',this.message)
3. 在B组件中通过根组件中的bus监听事件接收数据

this.$root.bus.$on('transfer',function(value){
  alert(value);
});

四、父链与子链

1. 子组件通过父链获取、修改父组件的数据：this.$parent

Vue.component('child-component',{
  template:'<button @click="setFatherData">通过点击我修改父亲的数据</button>',
  methods:{
    setFatherData:function () {
      this.$parent.msg = '数据已经修改了'
    }
  },
})

2. 父组件通过子链获取、修改子组件的数据：this.$children

• 子链索引：this.$refs，为子组件提供了索引的方法，在子组件中添加特殊属性ref后即可使用。

<div id="demo">
  <a-component ref="a"></a-component>
</div>
var app = new Vue({
  el: '#demo',
  methods: {
    setA: function(){
      this.$refs.a.message = '子组件A中的内容被父组件修改了';
    },
});

五、slot(插槽)

1. slot(插槽)简介：
   为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发。Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的插槽。
2. slot(插槽)的使用：
   (1)单个插槽

<div id="app" >
  <my-component>
    <p>我是父组件的内容</p>
  </my-component>
</div>

Vue.component('my-component',{
  template:`<div>
              <slot>如果父组件没有插入内容，我就作为默认出现</slot>
            </div>`
})

(2)具名插槽

<name-component>
  <h3 slot="header">我是标题</h3>
  <p>我是正文内容</p>
  <p>正文内容有两段</p>
  <p slot="footer">我是底部信息</p>
</name-component>

Vue.component('name-component',{
  template:`<div>
              <div class="header"><slot name="header"></slot></div>
              <div class="contatiner"><slot></slot></div>
              <div class="footer"><slot name="footer"></slot></div>
            </div>`
})

3. 作用域插槽
   作用域插槽是一种特殊的slot，使用一个可以复用的模板来替换已经渲染的元素，通过它可以从子组件获取数据。

<my-component>                                           
  <template slot="abc" slot-scrop="prop">    //旧方法，注意：template模板是不会被渲染的
    <p>{{prop.text}}</p>
  </template>              
  <p slot="abc" slot-scrop="prop">{{prop.text}}</p>       //新方法
</my-component>

Vue.component('my-component',{
  template:`<div>
              <slot text="我是来自子组件的数据" name="abc"></slot>
            </div>`
})

4. 访问插槽：通过this.$slots.(name)

<name-component>
  <h3 slot="header">我是标题</h3>
  <p>我是正文内容</p>
  <p>正文内容有两段</p>
  <p slot="footer">我是底部信息</p>
</name-component>

Vue.component('name-component',{
  template:`<div>
              <div class="contatiner"><slot></slot></div>
              <div class="footer"><slot name="footer"></slot></div>
            </div>`,
  mounted:function () {
    var header = this.$slots.header;       //访问插槽
    var text = header[0].elm.innerText;
    console.log(header);
    console.log(text);
  },
})