组件通信方式-CFANZ编程社区

1.子传父

子组件通过$emit抛出自定义事件传递数据

子组件

<template>
 <div @click="aaa"></div>
</template>
<script>
 export default {
    methods: {
      aaa () {
         // this.$emit('自定义事件名'， 传过去参数数据) 子组件通过抛出事件
         this.$emit('son', {a: 1, b: 2})
      }
    }
 }
</script>

父组件

<template>
 <div @son="bbb"></div>
</template>
<script>
 export default {
    methods: {
      bbb (obj) {
        console.log(obj)  // {a:1, b:2}
      }
    }
 }
</script>

2 父传子

用props传值

父组件

<template>
 <div :father = 'son'></div>
</template>
<script>
 export default {
   data(){
      return {
          son: '组件'
           }
        }
 }
</script>

子组件

<script>
 export default {
     //接受父组件
    props: ['father']
    data () {
      return {
          name: ''
        }
    },
    methods: {
       this.name = this.father
       console.log(this.name)  //  子组件视图中 直接{{father}} 就可解析出值  组件
    }
 }
</script>

3 事件总线

第一步：在main.js中给Vue原型上补充$eventBus属性

 Vue.prototype.$eventBus = new Vue()

第二步：任意组件发布事件
this.$ eventBus.$ emit(‘自定义事件名’，参数)

 this.$eventBus.$emit('aaa'，{a:1, b:2})

第三步：任意组件监听（谁监听谁能拿到传递过来的值）
this.$ eventBus.$ on(‘监听的事件名’，事件处理函数)

this.$eventBus.$on('aaa'，(obj) => {
    console.log(obj)  // {a:1, b:2}
})

4 vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  // 各种配置项
    // state 就相当于vue组件中的data。它用来存放整个vue项目中公共的数据
    //       这个数据，在所有的vue组件中都可以访问到
    state: {
        num: 101,
        count: 21.5,
        person: {
            name: '张三'
        }
    },
  mutations: {
        // 下面定义了一个mutation。本质就是一个函数
        // 特殊之处：在定义函数时，第一个参数就表示当前vuex中的state
        //          直接在此函数内部去修改state.
        //          在调用这个函数时，第一个参数不要传入。
        // 1.不带参数的mutation
        mAdd(state){
            // 这个mutation的作用就是让state中的num加1
            state.num++
        },
        // 2. 带参数的mutation
        mAddN(state, n){
            // 这个mutation的作用就是让state中的num加 n
            // 这个n是需要额外传入的
            state.num = state.num + n
        }
    }
});

直接获取

<button @click="Add">+1</button>

methods:{
  methods: {
    add () {
      // 直接修改state，不推荐
      // this.$store.state.num++

      // 调用了Vuex.store配置项中的mutations对象中的名为mAdd的方法。
      // 不需要传入任何参数。
      this.$store.commit("mAdd")
    }，
    addN () {
      // 调用一个带参数的mutation
      this.$store.commit('mAddN', 10)
    }
  }
}

通过映射

<script>
// 在组件中通过映射的方式来使用vuex中的mutations
// 1. 引入工具函数
import { mapMutations } from 'vuex'
// mapMutations 是一个函数，在vue中定义的。
// mapMutations(['mAdd', 'mAddN'])的返回值是一个对象
//       这个对象类似于{mAdd:function(){}, mAddN:function(){}}
// 2. 在methods中 插入 映射函数的结果

export default {
  name: 'SubItem',
  // 下面的代码中，相当于methods中定义了 4个方法 
  // sub,mAdd,mAddN, test
  methods: {
    sub () {
      this.$store.state.num--
    },
    ...mapMutations(['mAdd', 'mAddN']),
    test () {
      // 由于上面的mAdd并映射成方法，所以这里可以直接加this.来访问。
      // this.mAdd()
      this.mAddN(100)
    }
  }
}
</script>