v-model 双向绑定 vue3.x 

 1 // 子组件 childComponent
 2 <template>
 3     <div>{{ icon }}</div>
 4     <div @click="chooseIcon(item)"></div>
 5 </template>
 6 <script>
 7 import {defineComponent} from 'vue';
 8 export default defineComponent({
 9     props: {
10     icon: {  // 从父组件接受变量
11       type: String,
12       default: () => '',
13     },
14   },
15   emits: ['update:icon'],
16   setup(_, { emit }) {
17     const chooseIcon = item => {
18       emit('update:icon', item);   
19       // icon = item 
20       // emit(update:变量名, 变量值) 就可以把改变的值传给父组件了
21     };
22   },
23 })
24 </script>
25 
26 // 父组件 father
27 
28 <child-component v-model:icon="fatherIcon"></child-component>
29

 

posted @ 2021-09-25 11:45  tcanhe  阅读(152)  评论(0)    收藏  举报