vue3怎么在父组件修改子组件的值？

Question

2中，直接this.$refs.xx就好了,3查了一下有一个expose,用上了<script setup>语法不会写了...请问有没有直接修改子组件的方法呢？

Answer 1

原则上是不允许父组件直接修改子组件数据的，如果你需要在父组件中修改子组件的值，可以通过调用子组件的方法来实现

Answer 2

子组件需要通过defineExpose()把方法暴露出去

Answer 3

<script setup> 子组件可以根据自己的需要使用defineExpose将父组件需要的方法或者属性暴露出去，父组件通过ref, 去修改子组件的值：如下：

父组件：

<script setup>
const childRef = ref()
const set = () => {
    childRef.value.data = 'hello world';
}
</script>
<son ref="childRef" />
<button @click=set>set</button>

子组件：

<script setup>
const data = ref("abc")
defineExpose({data})
</script>
<div>{{data}}</div>