1、父传子组件机制

父组件的代码

<template>
  <div class="Parent">
    <!-- 父传子的通信机制 -->
    <Children :count="count"></Children>
    <!-- 添加按钮改变父组件的值 -->
    <button @click="change">父组件数据传给子组件</button>
  </div>
</template>

<script>
import { ref, onUpdated } from "vue";
import Children from "@/components/Children.vue";
export default {
  name: "Parent",
  components: {
    Children,
  },
  setup(props, { emit, attrs, slots }) {
    const count = ref(0);
    const msg = ref("");
    const change = () => {
      return count.value++;
    };
    onUpdated(() => {
      console.log(count.value);
    });
    return {
      msg,
      count,
      change,
    };
  },
};
</script>

子组件的代码

<template>
  <div>
    <!-- 子组件传的值 -->
    <h1>子组件展示的数据：{{ count }}</h1>
  </div>
</template>

<script>
import { ref, toRefs } from "vue";
export default {
  name: "Children",
  props: {
    count: Number,
  },
  setup(props, { emit, attrs, slots }) {
    let { count } = toRefs(props); // 让props下的count保持活性
    return {
      count,
    };
  },
};
</script>

<style scoped>
</style>

image.png

2、子传父通信机制

父组件代码

<template>
  <div class="Parent">
    <!-- 父组件接受分发的事件 -->
    <Children @sendMsg="sendMsg"></Children>
    <!-- 子组件传过来的数据 -->
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import { ref, onUpdated } from "vue";
import Children from "@/components/Children.vue";
export default {
  name: "Parent",
  components: {
    Children,
  },
  setup(props, { emit, attrs, slots }) {
    const msg = ref("");
    //父组件来接受子组件的数据
    const sendMsg = (val) => {
      console.log(msg);
      msg.value = val.value;
    };
    return {
      msg,
      sendMsg,
    };
  },
};
</script>

子组件代码

<template>
  <div>
    <!-- 子组件传父组件 -->
    <button @click="childChange">子组件向父组件传输数据</button>
  </div>
</template>

<script>
import { ref, toRefs } from "vue";
export default {
  name: "Children",
  setup(props, { emit, attrs, slots }) {
    const msg = ref("子组件的msg数据");
    const childChange = () => {
      emit("sendMsg", msg);
    };
    return {
      msg,
      childChange,
    };
  },
};
</script>

<style scoped>
</style>

image.png

3、非父子组件通信机制

• 首先安装插件mitt

npm install --save mitt

• 创建文件utils，里面放一个event.js文件

// event.js代码
import mitt from 'mitt'
const VueEvent = mitt()
export default VueEvent;

image.png

• 兄弟组件A向兄弟组件B传值

组件A的代码

<template>
  <button @click="sendChildB">向兄弟组件childB传值</button>
</template>
  
<script>
import VueEvent from "../utils/event";
import { ref, toRefs } from "vue";
export default {
  setup() {
    const str = ref("组件A的数据信息");
    const sendChildB = () => {
      VueEvent.emit("send", str);
    };
    return {
      str,
      sendChildB,
    };
  },
};
</script>

<style scoped>
</style>

组件B的代码

<template>
  <h3>childA组件传过来的msg: {{ msg }}</h3>
</template>

<script>
import VueEvent from "../utils/event";
import { ref, toRefs } from "vue";
export default {
  setup() {
    const msg = ref("");
    VueEvent.on("send", (val) => {
      msg.value = val.value;
    });
    return {
      msg: msg,
    };
  },
};
</script>

<style scoped>
</style>

被引入到的组件代码

<template>
  <div class="about">
    <childA> </childA>
    <childB> </childB>
  </div>
</template>

<script>
import childA from "../components/childA";
import childB from "../components/childB";
export default {
  components: {
    childA,
    childB,
  },
  setup() {},
};
</script>

image.png

这样Vue2.x版本的组件通信机制转为Vue3.0的就大致理解清楚了。