Vue组件通信

组件通信

父→子组件通信

• 父组件将自己的数据传递给子组件

1. 父组件将自己的数据通过属性绑定的形式传递给子组件
   <Son :aa = "num"></Son>

2. 子组件在自己的配置项中通过 props 来接收这个属性

          Vue.component('Son',{
            template: '#son',
            // props: ['aa'],
            props: {
              // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
              'aa': Number 
            }
          })
   

3. 这个属性可以直接向全局变量一样使用
   <p> {{ aa }} </p>

代码：

 <template id="father">
        <div>
            <h3>Father</h3>
            <hr>
            <son :aa= 'num'></son> <!--通过单项数据绑定将数据传入子组件-->
        </div>
    </template>

Vue.component( 'Father',{
        template:'#father',
        data(){
            return{
                num:1000
            }
        }
    })
Vue.component( 'son',{
        template:'#Son',
        props: {    //props 来接收这个属性
            'aa':Number
        }
    })

子→父组件通信1

• 子父组件通信1：

  1. 子组件将一个数据发送给父组件

  2. 如何实现：自定义事件

  3. 流程：

1. 父组件中定义一个数据，然后在methods中定义一个方法用来修改这个数据

          Vue.component('Father',{
             template: '#father',
             data () {
               return {
                 num: 0
               }
             },
             methods: {
               add ( val ) {
                 console.log('add')
                 this.num += val
               }
             }
           })
   

2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件
   <Son @aa = 'add'></Son>

3. 子组件可以通过 this.$emit(自定义事件名称，参数1，参数2...)来订阅这个自定义事件‘this.$emit(‘aa’,this.money)`

代码：

 <template id="father">
    <div>
        <h3>Father</h3>
        <p> {{num}} </p>
        <hr>
        <Son @aa = 'receive'></Son>   <!--通过自定义事件的形式将方法传给子组件-->
    </div>
    </template>

 Vue.component('Father',{
      template: '#father',
      data () {
          return {
              num:0
          }
      },
      methods: {
          receive (val) { 
            this.num +=val
          }
      }
  })

  Vue.component('Son',{
      template: '#son',
      data (){
          return {
              num:10
          }
      },
      methods: {
          give (){
              this.$emit('aa',this.num)  //通过$emit 订阅从父组件传过来的自定义时间
          }
      }
  })

子→父组件通信2

• 子父组件通信1：

  1. 父组件中定义一个数据，然后在methods中定义一个方法用来修改这个数据

 Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        this.num += val
      }
    }
  })

2. 父组件通过属性绑定的形式，将父组件的一个方法传递给子组件

 <Son :add ='add'></Son>

3. 子组件在自己的配置项中通过 props 来接收这个属性

    Vue.component('Son',{
        template: '#son',
        data () {
            return {
                lnum:10
            }
        },
        props: ['add']
    })

    new Vue ({
        el: '#app',
    })

非父子组件通信1

• 非父子组件通信第一种形式 ： ref链绑定
  ref不仅可以绑定组件，也可以绑定普通元素

  业务： 别的组件中获取另外一个组件？
  解决： 绑定ref

 <div id="app">
        <People ref = 'people'></People> <!--ref绑定-->
        <Man ref = 'man'></Man>  <!--ref绑定-->
    </div>

Vue.component( 'People',{
    template: '#people',
    data (){
        return {
            num : 10
        }
    },
    methods:{
        give(){
            console.log(this)
            this.$parent.$refs.man.lnum = this.num //执行获取的组件通过ref链得到 其他组件的数据
        }
    }
} )

Vue.component( 'Man',{
    template: '#man',
    data (){
        return {
            lnum : 0
        }
    },
} )

非父子组件之间通信2

• 非父子组件通信第二种形式： 事件总线

1. 通过 new Vue 在得到另外一个实例

2. 在组件的生命周期中通过钩子函数使用$on将组件内修改数据的方法添加进 新的实例中

3. 另一个组件内通过事件的订阅 $emit 得到此方法 进行操作

var bus = new Vue()

Vue.component('People',{
    template:'#people',
    data () {
        return {
            num:10
        }
    },
    methods:{
        add(){
            bus.$emit('give',this.num)    //事件订阅  获得操控另外组件数据的方法
        }
    }
})

Vue.component('Man',{
    template: '#man',
    data (){
        return {
            lnum:0
        }
    },
    mounted () {
        bus.$on('give',(val) => {  // 在钩子函数mounted（也可使用挂载前的其他钩子函数）中使用 对新的实例bus事件声明
            this.lnum += val
        })
    }
})

new Vue ({
    el: '#app',
})