vue3.0 组件传值

vue3.0组件传值

子组件

代码如下（示例）：

<template>
  <p @click="handle">{{ test }}</p>
</template>
<script>
export default {
  props: {
    test: String,
  },
  setup(props, ctx) {
    const handle = () => {
      ctx.emit("handle1");
    };
    return {
      handle,
    };
  },
};
</script>

2.父组件

代码如下（示例）：

<template>
  <div class="about">
    <Test :test="testfont" @handle1="handle1" />
  </div>
</template>
<script>
import Test from "@/views/Test.vue";
import { ref } from "vue";
export default {
  name: "About",
  components: {
    Test,
  },
  setup() {
    const testfont = ref("我在about Test");
    const handle1 = () => {
      testfont.value = "我不想说话了";
    };
    return {
      testfont,
      handle1,
    };
  },
};
</script>