vue.js中的组件通信

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

1. 在子组件构建的自定义元素中添加属性：
   
2. 在子组件中通过props接收数据

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

二、子传父

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

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

2. 使用v-model
   (1)在子组件构建的自定义元素中通过v-model绑定动态属性(默认为value属性)：
   
   (2)在子组件中触发input事件，将数据以参数的形式发送
   this.$emit('input',this.count);
   (3)父组件中第①步绑定的动态属性的值会自动更新
   

   您好,您现在的银行余额是{{total}}元

   
   (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:'通过点击我修改父亲的数据',
  methods:{
    setFatherData:function () {
      this.$parent.msg = '数据已经修改了'
    }
  },
})

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

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

  

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

五、slot(插槽)

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

  
    
我是父组件的内容
  


Vue.component('my-component',{
  template:`

              如果父组件没有插入内容，我就作为默认出现
            
`
})

(2)具名插槽

  
我是标题
  
我是正文内容
  
正文内容有两段
  
我是底部信息


Vue.component('name-component',{
  template:`

              

              

              

            
`
})

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

                                           
                
  
{{prop.text}}
       //新方法


Vue.component('my-component',{
  template:`

              
            
`
})

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

  
我是标题
  
我是正文内容
  
正文内容有两段
  
我是底部信息


Vue.component('name-component',{
  template:`

              

              

            
`,
  mounted:function () {
    var header = this.$slots.header;       //访问插槽
    var text = header[0].elm.innerText;
    console.log(header);
    console.log(text);
  },
})