vue复习--vue组件通讯有几种方式

采用vue3组合式API写法

1.props和$emit

2.自定义事件

子组件:

<template>
  <h1 @click="clickHandler">{{ msg }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  emits: ["showMsg"],
  setup(props, { emit }) {
    const clickHandler = () => {
      emit("showMsg", "hello world");
    };
    return { clickHandler };
  },
};
</script>

<style>
</style>

父组件:

    <HelloWorld msg="welcome to Vue App" @showMsg="showMsg" />

  methods: {
    showMsg(msg) {
      console.log(msg);
    },
  },