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>    

 

posted @ 2022-05-10 14:36  冰中焱  阅读(624)  评论(0编辑  收藏  举报