1. 程式人生 > 其它 >vue3 中 子元件中傳值,並呼叫父元件的方法

vue3 中 子元件中傳值,並呼叫父元件的方法

在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 default
defineComponnet ({ 10 emits:["自定義方法名"] 11 setup() { 12 context.emit("自定義方法名") 13 return {自定義方法名} 14     } 15   }) 16 </script>