好上面是vue官方的解释,现在我举个例子。
父组件
<template>
<div>我是一个父组件</div>
<!--HelloWorldVue 是一个子组件或者一个公共组件-->
<HelloWorldVue ref="dmo" />
<button @click>更改子组件的值</button>
</template>
<script>
import HelloWorldVue from './components/HelloWorld.vue';
export default {
components:{
HelloWorldVue
},
setup(){
const dmo = ref(null);
const change = () => {
demo.value.changeCount();
}
return {
demo,
change
}
}
}
</script>
子组件 / 公共组件中的代码
<template>
<div>在子组件中显示的数据---{{count}}</div>
</template>
<script>
export default {
setup(props, { expose }){
const count = ref(10);
const changeCount = () => {
count.value = 5555;
}
return {
count,
}
}
}
</script>
当点击button按钮,就可以改变子组件的count值