vue中父子传递属性值

1、父传子属性值

自定义图库组件

在add.vue中应用tuku组件并给默认值

效果

2、 子传父,逆向赋值

add.vue和第一问中一样

修改tuku组件,传值给add.vue

3、多个传递

效果:

点击两个修改按钮后

4、使用defineModel简化父子传值

其他代码跟3 一样,更改图库代码

tuku.vue

复制代码
<template>
 图库:{{ a }}
 图库:{{ b }}

 <!-- 点击后触发方法修改父组件的值 -->
 <el-button type = "primary" @click = "change">子修改img1</el-button>
 <el-button type = "primary" @click = "change2">子修改img2</el-button>
</template>


<script lang="ts" setup>

import { defineModel } from 'vue';

const a = defineModel("tukuimg1")
const b = defineModel("tukuimg2")

const change = ()=>{
    a.value = "这是子组件给img1"
}

const change2 = ()=>{
    b.value = "这是子组件给img2"
}
</script>
相关推荐
SamHou011 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干21 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大35 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu36 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846951 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js