vue3第二十一节(新增编译宏defineExpose)
引言:在vue2
中我们可以使用 this.$refs.xxx
调用组件内部的属性或者方法,同时子组件也可以使用 this.$parent.xxx
调用父组件的属性和方法;
但是
当我们在setup
语法糖中,因为此时的组件默认是关闭即组件是私有的,故使用$parent.xxx
或者 $children.xxx
是无法获取到对应的实例的; 需要链式调用时候,比如父组件需要调用子组件的属性方法,
那么此时我们可以使用defineExpose()
来暴露组件的属性方法
父组件:
<template>
<div>
defineExpose parent
<div>{{msg}}</div>
<el-button type="primary" @click="changMsg">父组件调用子组件方法</el-button>
<hr>
<ExposeChild ref="child" @changemsg="changMsg"></ExposeChild>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ExposeChild from './components/exposeChild.vue'
// 这里ref() 创建的对象要与模板中 ref='name' 的name 保持一致,不然无法读取 子组件
const child = ref(null)
const msg = ref('Andy')
const changMsg = () => {
// 直接通过ref调用 子组件的方法,前提是已经使用defineExpose() 将方法暴露出来
child.value.handleChangeName()
console.log('==child=', child.value)
}
</script>
子组件:
<template>
<div>
defineExpose 子组件
name---{{name}}
<el-button type="primary" @click="handleChangemsg">子组件调用父组件方法</el-button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const emits = defineEmits(['changemsg'])
const name = ref('Expose')
const handleChangeName = () => {
name.value = name.value + '' +'ExposeChange'
}
const handleChangemsg = () => {
emits('changemsg')
}
// 不用引入可以直接使用
defineExpose({
name, // 暴露出去的属性
handleChangeName // 暴露出方法
})
</script>
更多:组件之间通讯传值
原文地址:https://blog.csdn.net/weixin_39593730/article/details/137889776
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!