Vue2 组件通信、组件间传值的几种方式(分享)

1. 文件间的关系

App 为根组件
Father 与 Brother 为兄弟组件，也同为 App 的子组件
Child 是 Father 的子组件，也是 App 的孙组件

2. 父子之间传值

2.1 props，父传子

// Father.vue 文件
<template>
  <div id="father">
    <Child :cMsg="msg" />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Father",
  components: {
    Child,
  },
  data() {
    return {
      msg: "我是 Father 组件中的数据",
    };
  },
};
</script>

// Child.vue 文件
<template>
  <div id="child">
    <span> 我是 Child 组件，接收到的数据为：{{ cMsg }} </span>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    cMsg: String,
  },
};
</script>

2.2 props，子传父

// Father.vue 文件
<template>
  <div id="father">
    <Child :cHander="fHander" />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Father",
  components: {
    Child,
  },
  methods: {
    fHander(msg) {
      console.log(msg);
    },
  },
};
</script>

// Child.vue 文件
<template>
  <div id="child">
    <button @click="btn">点击我向 Father 组件传入数据</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    cHander: Function,
  },
  methods: {
    btn() {
      this.cHander("666666");
    },
  },
};
</script>

2.3 自定义事件，子传父

// Father.vue 文件
<template>
  <div id="father">
    <Child ref="child" />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Father",
  components: {
    Child,
  },
  mounted() {
    this.$refs.child.$on("change", (msg) => {
      console.log(msg);
    });
  },
};
</script>

// Child.vue 文件
<template>
  <div id="child">
    <button @click="btn">点击我向 Father 组件传入数据</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    btn() {
      this.$emit("change", 666666);
    },
  },
};
</script>

3. 兄弟之间传值

3.1 事件总线

// main.js 文件
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
  	// 需要在全局添加一个属性
    Vue.prototype.$bus = this
  }
}).$mount('#app')

// Father.vue 文件
<template>
  <div id="father">
    <button @click="btn">我要给 Brother 组件传数据</button>
  </div>
</template>

<script>
export default {
  name: "Father",
  methods: {
    btn() {
      this.$bus.$emit("change", 66666);
    },
  },
};
</script>

// Brother.vue 文件
<template>
  <div id="brother"></div>
</template>

<script>
export default {
  name: "Brother",
  mounted() {
    this.$bus.$on("change", (msg) => {
      console.log(msg);
    });
  },
};
</script>

3.2 Vuex

// store/index.js 文件
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    change(state, value) {
      state.count += value
    }
  }
})

// main.js 文件
import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 需要挂载 store
  store
}).$mount('#app')

// Father.vue 文件
<template>
  <div id="father">
    <button @click="btn">我要给 VueX 中的数据加一</button>
  </div>
</template>

<script>
export default {
  name: "Father",
  methods: {
    btn() {
      this.$store.commit("change", 1);
    },
  },
};
</script>

// Brother.vue 文件
<template>
  <div id="brother">
    {{ $store.state.count }}
  </div>
</template>

<script>
export default {
  name: "Brother",
};
</script>

3.3 发布订阅

需要安装 pubsub：npm i pubsub-js

// Father.vue 文件
<template>
  <div id="father">
    <button @click="btn">我要向 Brother 组件传递数据</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "Father",
  methods: {
    btn() {
      pubsub.publish("change", 666);
    },
  },
};
</script>

// Brother.vue 文件
<template>
  <div id="brother"></div>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "Brother",
  mounted() {
    pubsub.subscribe("change", (msgName, msg) => {
      console.log(msgName, msg);
    });
  },
};
</script>

4. 祖孙之间传值

4.1 provide与inject

// App.vue 文件
<template>
  <div id="app">
    <Father />
  </div>
</template>

<script>
import Father from "./components/Father.vue";

export default {
  name: "App",
  components: {
    Father,
  },
  provide: {
    msg: "要给 Child 传数据",
  },
};
</script>

// Father.vue 文件
<template>
  <div id="father">
    <Child />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Father",
  components: {
    Child,
  },
};
</script>

// Child.vue 文件
<template>
  <div id="child">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Child",
  inject: ["msg"],
};
</script>