Vue2 组件间通信方式

1. 父子组件

   • props
   • v-model/.sync
   • $emit/v-on

2. 任意组件：

   • EventBus($emit/$on)
   • Vuex

父子组件

props

// Parent.vue 传送
<template>
    <child :msg="msg"></child>
</template>
​
// Child.vue 接收
export default {
  // 写法一 用数组接收
  props:['msg'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}

v-model/.sync

• v-model 和 .sync 两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。
• v-model 是 .sync 的一种体现。.sync 比较灵活,v-model 较单一

v-model

<template>
  <div>
    <p>父组件：{{value}}</p>

    <child v-model="value" />
    <!-- 两者等效value, input -->
    <child v-bind:value="value" v-on:input="value = arguments[0]" />
  </div>
</template>

<script>
  import child from './Child.vue'
  export default {
    components: {
      child
    },
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<template>
  <div>
    子组件：
    <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
  export default {
    props: ['value']
  }
</script>

.sync

<template>
  <div>
    <p>父组件：{{value}}</p>

    <child v-model="value" />
    <!-- 两者等效value, input -->
    <child v-bind:value="value" v-on:input="value = arguments[0]" />
  </div>
</template>

<script>
  import child from './Child.vue'
  export default {
    components: {
      child
    },
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<template>
  <div>
    子组件：
    <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
  export default {
    props: ['value']
  }
</script>

$emit / v-on

父组件

<template>
    <HelloWorld @fn="fn" />
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  components: { HelloWorld },
  methods: {
    fn(e) {
      console.log("子传父" + e);
    },
  },
};
</script>

子组件

<template>
  <input type="text" @blur="fn('我是子组件，可以传参数')" />
</template>

<script>
export default {
  methods: {
  // 失去焦点发送
    fn(e) {
      this.$emit("fn", e);
    },
  },
};
</script>

任意组件

EventBus/$emit/$on

main.js

Vue.prototype.$bus = new Vue()

任意 A 组件

<template>
    <HelloWorld />
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  components: { HelloWorld },
  mounted() {
    this.$bus.$on("fn", (value) => {
      console.log(value);
    });
  }
};
</script>

任意 B 组件

<template>
    <input type="text" @blur="fn" />
</template>

<script>
export default {
  methods: {
    fn() {
      this.$bus.$emit("fn", "可以父子通信，也可以兄弟通信,s-z-h");
    },
  },
};
</script>

vuex 通信

store

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

export default new Vuex.Store({
  state: { // 数据
    data: 'vuex 的数据',
    a: 1,
    b: 2,
  },
  mutations: {},// 同步
  actions: {},// 异步
  modules: {},// 模块
  getters: { // store 的计算属性:返回一个函数
    num(state) {
      return state.a + state.b
    }
  },
})

App.vue

<template>
  <div>
    <!-- Vuex store 中 data数据：vuex 的数据-->
    {{ data }}
    <!-- Vuex store 中 getters数据：3 -->
    {{ num }}
  </div>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  export default {
    //辅助函数
    computed: { ...mapState(['data']), ...mapGetters(['num']) }
  }
</script>

参考文章

• vue2 的 12 种组件间通信方式