學習vue——父子相傳
modelValue 與 update:modelValue(父子相傳v-model,相互綁定)
父組件
1 <script lang="ts" setup> 2 import { ref } from 'vue' 3 const value = ref({ 4 page: 1, 5 size: 2, 6 selectId : "" 7 }) 8 </script> 9 10 <template> 11 <search-select v-model="value.selectId"></search-select> 12 </template>
子組件
1 <script setup> 2 defineProps(['modelValue','width']) 3 const emit = defineEmits(['update:modelValue']) 4 </script> 5 6 <template> 7 <el-select 8 9 :modelValue = modelValue 10 @update:modelValue="emit('update:modelValue',$event)" 11 placeholder="請選擇" :style="{ width }"> 12 <el-option label="新聞" value="110">新聞</el-option> 13 <el-option label="科技" value="120">科技</el-option> 14 </el-select> 15 </template>
vue2版本 -父傳子

子傳父

props

vue2版本 -非父傳子


3、v-model 父子相傳

4、sync


浙公網安備 33010602011771號