vue3 中 子元件中傳值,並呼叫父元件的方法
阿新 • • 發佈:2022-05-10
在vue3 中傳值,父傳子,在父元件中自定義屬性,子元件使用props就可以接收,但是子傳父之間是怎麼傳值呢?
父元件程式碼如下:自定義屬性名和方法名
1 <template> 2 <son @自定義屬性名="自定義方法名"> 3 </template> 4 5 6 <script> 7 import {defineComponnet} from "vue" 8 import Son from "./components/son.vue" 9 export default defineComponnet ({10 setup() { 11 const 自定義方法名 = () => { 12 //此處呼叫父元件的任何方法; 13 } 14 return {自定義方法名}
15 }
16 })
17 </script>
子元件程式碼如下:必須要有emits:[],此陣列可以放多個方法名和資料;
1 <template> 2 <div></div> 3 </template> 4 5 6 <script> 7 import {defineComponnet} from "vue" 8 9 export defaultdefineComponnet ({ 10 emits:["自定義方法名"] 11 setup() { 12 context.emit("自定義方法名") 13 return {自定義方法名} 14 } 15 }) 16 </script>