学习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>

 

posted @ 2024-10-25 18:02  东方不败--Never  阅读(63)  评论(0)  编辑  收藏  举报