父子組件的信息傳遞無礙就是父組件給子組件傳值(props和$attrs)和父組件觸發子組件的事件($emit)
之前已經談過了父組件給子組件傳值了,現在來說說父組件觸發子組件的自定義事件吧~~
實際上挺簡單:
父組件:
<template> <div> <my-child abcClick="sayHello"></my-child> </div> </template> <script> export default { method: { sayHello(Num,Str) { alert('hello world~~' + Num + Str) } } } </script>
子組件:
<template> <div> <!--例如最簡單的封裝一個按鈕--> <button @click="childClick"></button> </div> </template> <script> export default { data: { return{ myNum: 456, myStr: 'haha' } }, method: { childClick() { this.$emit('abcClick', this.myNum, this.myStr) } } } </script>
核心就是通過$emit來觸發自定義事件(不需要注冊),並且傳值出去