Vue3中子元件傳資料給父元件的作法

隨著使用Vue越來越深入，一定會遇到父子元件傳資料的需求，我想有稍微研究過一定知道這個口訣「Props in, Event out」XD，父傳子用props，子傳父用event。那今天就來記錄我實作時遇到的狀況。

在運作上，子元件透過觸發「事件event」的作法來更新父元件的資料，Vue3中使用了v-on來實作，父元件需要有個監聽事件如下：

parent-component.js

<child-component
    @listenevent="updateEvent"
></child-component>

<script>
export default defineComponent({
   setup() {

    },
  methods: {
    updateEvent(val) {
      //這邊會被觸發
      //做你想做的事
      console.log(val)
    }
  }
});
</script>

先準備一個listenevent監聽事件，取名為updateEvent，當子元件打資料過來時會觸發updateEvent。

child-component.js

<script>
export default defineComponent({
   setup(_,{ emit }) {
    const handleChange = (value) => {
        emit("listenevent",value)
    }
    onMounted(() => {
      handleChange("hello")
      });
    },
});
</script>

接著在子元件增加觸發listenevent事件的方式，如上handleChange，範例是onMounted時會觸發handleChange，這時會打"hello"回到父元件，這時父元件的updateEvent就會被觸發，應該就能看到"hello"囉。

如果出現「...vue 3 emit warning " Extraneous non-emits event listeners"...」的警告提示，記得子元件要加上emits的宣告。

child-component.js

<script>
export default defineComponent({
   emits: ["getGameitle"], //<---加上宣告
   setup(_,{ emit }) {
    const handleChange = (value) => {
        emit("listenevent",value)
    }
    onMounted(() => {
      handleChange("hello")
      });
    },
});
</script>