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

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

阅读 8.1k
3 个回答

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

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

<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题