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>