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>
相关推荐
全职计算机毕业设计13 分钟前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友29 分钟前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈37 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg367844 分钟前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550401 小时前
初级程序员入门指南
javascript·python·算法
小小小小宇1 小时前
前端小tips
前端
HelloWord~1 小时前
SpringSecurity+vue通用权限系统
vue.js·spring boot
小小小小宇1 小时前
二维数组按顺时针螺旋顺序
前端
钡铼技术ARM工业边缘计算机1 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net