前端
一点也不简单

Vue.js中的组件通信

注意:组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)

Vue.js中组件通信一共分为四种:

  • 父子组件通信
  • 子父组件通信
  • 非父子组件通信
  • 多组件状态共享

下面一一介绍:

父子组件通信

绑定的是简单数据类型:

  1. 父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性
  2. 子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称
  3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
  4. 父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流

结构:

子父通信

绑定了复杂的数据类型:

  1. 父组件中的数据是一复杂数据类型, 那么父组件绑定数据的时候, 给子组件的是一个引用地址
  2. 子组件可以通过这个引用地址, 修改这个数据
  3. 效果上像, 子组件和父组件通信了, 违背单项数据流

父组件可以传递一个方法给子组件:

  1. 父组件定义方法, 然后将这个方法通过单向数据绑定的形式传递给子组件
  2. 子组件通过props属性接收, 然后通过 @click = “方法名”

通过自定义事件来实现通信:

  1. 父组件中定义 数据 和 方法(方法时用来操作数据的)
  2. 在子组件身上绑定自定义事件
  3. 子组件定义方法, 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

结构:


//步骤1,父组件中定义数据和方法,gk,getMoney
    Vue.component('King',{
       template:'#king',
       data(){
           return {
               gk:0
           }
       },
       methods:{
           getMoney(value){
              this.gk+=value;
           }
       }
    })
    //步骤3,子组件定义方法,这个方法中通过方法中通过 this.$emit(eventType,实际参数)触发了步骤2的自定义事件
    Vue.component('People',{
        template:'#people',
        data(){
            return {
                money:2000
            }
        },
        methods:{
            giveMoney(){
                this.$emit('getmoney',this.money/2)
            }
        }
        
    })
   new Vue({
       el:'#app'
   })

非父子通信

使用ref来绑定组件, (注意:ref也可以绑定DOM元素) 【ref链】

  1. 在父组件的模板中, 使用ref = refName 绑定在两个兄弟组件身上
  2. 在任意一个子组件中, 就可以通过 this.$parent.$refs.refName 就可以获得另一个子组件了, 同时这个自组件身上的数据和方法同样也得到了

结构:

Vue.component('Father',{
    template: '#father',
    data () {
      return {
        name: 'father'
      }
    }
  })
Vue.component('Boy',{
    template: '#boy',
    data () {
      return {
        cash: 2000
      }
    },
    methods: {
      incrementCash (value) {
        this.cash += value
      }
    }
  })
Vue.component('Girl',{
    template: '#girl',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give(){
        console.log('====================================');
        console.log(this.$parent);
        console.log('====================================');
        // console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent }
        this.$parent.$refs.boy.incrementCash( this.money )

        // this.$parent.$children
      }
    }
  })
  new Vue({
    el: '#app'
  })

通过事件总线(bus)

  1. 它是通过事件的发布(声明), 以及事件的订阅(触发)来做的
  2. 首先在js中 创建一个bus对象(vm)
var bus = new Vue()
  1. 在Boy组件中定义数据, 和修改数据的方法
  2. 在Boy组件中 通过 created 钩子 , 进行bus事件的发布
  3. 注意:参数传递问题实参写在 bus.$emit(‘add’,1000)
created: {
    bus.$on('add',this.addCount)
 }
  1. 在MyButton组件的方法中通过 bus进行事件的订阅

结构:

/*
         1.它是通过事件的发布(声明), 以及事件的订阅(触发)来做的
         2.首先在js中  创建一个bus对象(vm) 
         3.在Boy组件中定义数据, 和修改数据的方法
         4.在Boy组件中 通过 created 钩子 , 进行bus事件的发布
         注意:参数传递问题实参写在 bus.$emit('add',1000)
        */
       let bus=new Vue();
      Vue.component('Boy',{
          template:'#boy',
          data(){
              return {
                  cash:0
              }
          },
          methods:{
              getMoney(value){
               this.cash+=value;
              }
          },
          created(){
              bus.$on('add',this.getMoney)
          }
      })
      Vue.component('Girl',{
          template:'#girl',
          methods:{
             giveMoney(){
                 bus.$emit('add',1000)
             }
          }
      })
       new Vue({
           el:'#app'
       })

多组件状态共享

赞(3) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js中的组件通信

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏