vue学习(1)vue3/2下的 父子/爷孙组件间方法调用
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了)vue2中的写法爷组件控制孙组件的锚点跳转(父子组件间方法调用类似)// 孙组件<template><div ref="item"></template>methods:{nav (index) {this.$refs.item[index].scrollIntoV
·
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了)
vue2中的写法 爷组件控制孙组件的锚点跳转(父子组件间方法调用类似)
// 孙组件
<template>
<div ref="item">
</template>
methods:{
nav (index) {
this.$refs.item[index].scrollIntoView(true)
}
]
// 爷组件
methods:{
// problemType 为父组件
this.$refs.problemType.$children[0].navTo(index)
}
vue3.2中的写法(defineExpose可以暴露属性和方法)
// 孙组件
<script lang='ts' setup>
const sonMethod = () :void => {
// 子组件方法
}
const sonData = ref<string>('这是子组件数据')
defineExpose({sonMethod, sonData }) // 必须在子组件中暴露出来
</script>
// 父组件
<template>
<Son ref='son' />
<div @click='controlSon'></div>
</template>
<script lang='ts' setup>
const son = ref<any>(null)
const controlSon = () :void => {
son.value.sonMethod()
}
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)