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>