- 使用
<script setup>的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定。- 可以通过
defineExpose编译器宏来显式指定在<script setup>组件中要暴露出去的属性
1.我们在使用之前定义一个count变量，将值放入
defineExpose进行传递，在写的时候要注意只有当名字相同时就可以只写变量名否则就需要跟下面那种保持一致
<template>
<view class="out">
子组件
</view>
</template>
<script setup>
import { ref} from "vue"
const count=ref(100);
defineExpose({
count,
str:"小虾米"
})
</script>
<style lang="scss">
.out{
padding: 20px;
background: #eee;
}
</style>然后我们在父类中使用ref接收一下名字可以自己取，完了之后需要用到onMounted生命周期钩子将我们的值在里面输出一下。
<template>
<view class="layout">
<Demo-child ref="child"></Demo-child>
</view>
</template>
<script setup>
import {ref,onMounted} from "vue"
const child = ref(null);
onMounted(()=>{
console.log(child.value);
});
</script>
<style>
button{
border: 1px solid black;
background: aquamarine;
}
</style>可以看到接受到来自子类传过来的值
2.现在我这个操作进行一下升级，定义一个点击按钮来修改子类中的值，写一个函数让count中的值进行++的操作，注意啊这里写的函数传过去时不用加括号直接写名字就可以了
<template>
<view class="out">
子组件count的值:{{count}}
</view>
</template>
<script setup>
import { ref} from "vue"
const count=ref(100);
const updateCount=function(){
count.value++;
}
defineExpose({
count,
str:"小虾米",
updateCount
})
</script>
<style lang="scss">
.out{
padding: 20px;
background: #eee;
}
</style>在父类中写一个按钮并且定义一个点击事件，这里因为他是一个函数所以调用时要加括号
<template>
<view class="layout">
<Demo-child ref="child"></Demo-child>
<button @click="update">点击修改</button>
</view>
</template>
<script setup>
import {ref,onMounted} from "vue"
const child = ref(null);
const update=function(){
child.value.updateCount();
}
onMounted(()=>{
console.log(child.value);
});
</script>
<style>
button{
border: 1px solid black;
background: aquamarine;
}
</style>这样但我们每次点击时就会修改它的值，可以看到count里value的值发生了变化
