vue3中的$refs 和$parent

$refs 是父可以查看到子的所有数据，假如想要修改的话需要导入

这个意思就是把aaa属性和bbb属性暴漏出去，让父可以修改

definExprop({aaa,bbb})

$parent是子可以查看到父的所有数据，假如想要修改的话需要导入

这个意思就是把aaa属性和bbb属性暴漏出去，让子可以修改

definExprop({aaa,bbb})

父操作子

父
 
 
 
<templace>
<a ref='aa'/>
//使用$refs参数，加上就可以获得子身上的数据了，记得先给子定义ref
<button @click='getaa($refs)'>父级按钮</button>
</templace>
<script setup>
import {ref} from 'vue'
import a from './a.vue'
let aa = ref()
//这个value就是子组件的数据
function getaa(value){
 
value.aa.book = 4
}
</script>
 
 
 
 
 
 
 
子
<templace> 
 
</templace>
<script setup>
import {ref} from 'vue'
let book = ref(3)
//需要暴露出去
defineExpose({book})
</script>

子操作父

父
 
 
 
<templace>
<a ref='aa'/>
//使用$refs参数，加上就可以获得子身上的数据了，记得先给子定义ref
 
</templace>
<script setup>
import {ref} from 'vue'
import a from './a.vue'
let car = ref('奔驰')
//把car属性暴露出去
definExpose({car})
</script>
 
 
 
 
 
 
 
子
<templace> 
<button @click='getaa($parent)'>子级按钮</button>
</templace>
<script setup>
import {ref} from 'vue'
 
//这个value就是父组件的数据
function getaa(value){
//把父组件身上的汽车修改为奥迪
value.car.calue = '奥迪'
}
 
</script>