父元件vue3parent

<template>
  <children msg="父親像兒子傳遞一句話" @sayhello="childToParentEmit">
    <!-- 傳遞一個帶名字的插槽 aaa為插槽名字-->
    <!-- 在vue3中儘量用v-slot的方式  在自元件內使用context.slot時才會打印出插槽名字 -->
    <template v-slot:aaa>
      <span></span>
    </template>
  </children>
</template>
<script>
import children from "./vue3children";
export default {
  name: "vue3parent",
  components: {
    children
  },
  setup() {
    function childToParentEmit(value) {
      //  傳遞過來的值用一個引數接收
      console.log("我是子元件傳遞過來的事件", vavue3childrenlue);
    }
    // 在vue3中 宣告的方法也要return出去 否則訪問不到
    return {
      childToParentEmit
    };
  }
};
</script>
 

子元件vue3children

<template>
  <div>
    <!-- 可以直接使用傳遞過來的props裡面的資訊 -->
    {{msg}}
    <button @click="text">測試觸發一下子向父傳遞資訊</button>
  </div>
</template>
<script>
export default {
  name: "vue3children",
  //   vue3接收父親傳遞過來的訊息 也需要用props接受
  // 也可以用物件形式  指定型別和預設值
  props: ["msg"],
  // vue3使用emit時,需用一個emits宣告一下傳遞過來的事件,不然會有警告
  emits:['sayhello'],
  // setup會接收兩個引數 props 和 context
  setup(props, context) {
    console.log(props, context);
    // context 裡面主要有三個屬性需要了解
    // context.attrs  相當於vue2中的this.$attrs
    // context.emit   相當於vue2中的this.$emit
    // context.slots  插槽 相當於this.$slots
    function text() {
      // 子元件象父元件觸發事件傳遞資訊
      context.emit("text", 666);
    }, 
    return {
      text
    }
  }
};
</script>