首页 > 其他分享 >学习vue——modelValue 与 update:modelValue(父子相传v-model,相互绑定)

学习vue——modelValue 与 update:modelValue(父子相传v-model,相互绑定)

时间:2024-10-25 18:00:18浏览次数:5  
标签:vue const modelValue update 父子相传 ref

父组件

 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>

 

标签:vue,const,modelValue,update,父子相传,ref
From: https://www.cnblogs.com/zhang-dan/p/18503046

相关文章

  • 学习vue——图片、富文本的新增与修改回显
    提要富文本使用链接:https://vueup.github.io/vue-quill/父组件1<tempalte>2<!--抽屉-->3<drawer-pageref="open"@tijiao=EmitData></drawer-page>4</template>1<scriptlang="ts"setup>2constopen......
  • Vue3 新特性、Pinia
    一、新特性- defineOptions背景说明因为我们用了<scriptsetup>语法,没办法给setup去提供一些平级的属性,官方就提供了一个叫做defineOptions的语法      所以在Vue3.3中引入了defineOptions宏,用来定义OptionsAPI的选项。可以用defineOptions定义......
  • Vue文件下载和导出
    1.Promise.all()的运行机制输入参数是一个可迭代对象,每个元素是一个Promise。返回一个新的Promise,该Promise在所有输入的Promise都成功解决时解决,或者在任何一个输入的Promise被拒绝时立即拒绝。1.以下解释:该Promise在所有输入的Promise都成功解决时解决//工......
  • 基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-101
     基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-1014.1功能模块设计房产信息管理系统根据权限类型进行分类,主要可分为用户端和管理员端两大模块。用户端模块主要实现了作物图谱,病虫害科普等操作,加强了用户的操作体验。管理员服务端模块主要根据管理员对整个系统......
  • 基于springboot+vue实现的老年人健康管理系统 (源码+L文+ppt)4-100
      基于springboot+vue实现的老年人健康管理系统(源码+L文+ppt)4-100摘   要随着人口老龄化的不断加剧,老年人健康管理成为社会关注的焦点之一。本论文旨在设计和开发一款基于SpringBoot框架的老年人健康管理系统,以提升老年人的健康管理效率和质量。该系统通过整合各种......
  • 基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-101
     基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-1014.1功能模块设计房产信息管理系统根据权限类型进行分类,主要可分为用户端和管理员端两大模块。用户端模块主要实现了作物图谱,病虫害科普等操作,加强了用户的操作体验。管理员服务端模块主要根据管理员对整个系统......
  • 基于springboot+vue实现的老年人健康管理系统 (源码+L文+ppt)4-100
      基于springboot+vue实现的老年人健康管理系统(源码+L文+ppt)4-100摘   要随着人口老龄化的不断加剧,老年人健康管理成为社会关注的焦点之一。本论文旨在设计和开发一款基于SpringBoot框架的老年人健康管理系统,以提升老年人的健康管理效率和质量。该系统通过整合各种......
  • 基于springboot+vue实现的健身房管理系统 (源码+L文+ppt)4-097
     基于springboot+vue实现的健身房管理系统(源码+L文+ppt)4-097通过研究,本系统以MySQL为后端数据库,以JAVA为前端技术,以IDEA为开发系统,采用SPRINGBOOT架构,建立一个提供用户、员工、健身教练、健身课程、预约课程、课程签到、预约取消、器材信息、器材租用、器材归还、用户等级......
  • 基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-101
     基于springboot+vue实现的房产信息管理系统(源码+L文+ppt)4-1014.1功能模块设计房产信息管理系统根据权限类型进行分类,主要可分为用户端和管理员端两大模块。用户端模块主要实现了作物图谱,病虫害科普等操作,加强了用户的操作体验。管理员服务端模块主要根据管理员对整个系统......
  • 基于springboot+vue实现的老年人健康管理系统 (源码+L文+ppt)4-100
      基于springboot+vue实现的老年人健康管理系统(源码+L文+ppt)4-100摘   要随着人口老龄化的不断加剧,老年人健康管理成为社会关注的焦点之一。本论文旨在设计和开发一款基于SpringBoot框架的老年人健康管理系统,以提升老年人的健康管理效率和质量。该系统通过整合各种......