基于 vue3+ts 的父组件改变多个子组件的值 和 调用不同子组件的方法
1.父组件代码
主要用 ref<InstanceType<typeof 组件>>() 来获取各个子组件实例
注意事项:
setup中的变量feature和world 一定要和上面标签上ref后面的一致,不然拿到的是空的,很重要!很重要!
<template>
<div class="father">
<MyWorld ref="world"/>
<Feature ref="feature" />
</div>
<div @click="change">改变事件</div>
</template>
<script lang="ts">
import { defineComponent,onMounted } from 'vue'
import { ref } from 'vue'
import Feature from './Feature.vue'
import MyWorld from './myWorld.vue'
export default defineComponent({
components:{
MyWorld,
Feature
},
setup(){
// 要定义在外面,然后return出去
// feature和world 一定要和上面标签上ref后面的一致,不然拿到的是空的,很重要!很重要!
const world = ref<InstanceType<typeof MyWorld>>() //泛类型 <typeof HelloWorld>的HelloWorld是组件
const feature = ref<InstanceType<typeof Feature>>()
// 使用的时候在 onMounted里面 或者 其他方法里面 ,不然子组件的dom没加载完毕,就获取不到
onMounted(() => {
// 改变前
console.log('改变前1',world.value);
console.log('改变前2',feature.value);
})
const change = () =>{
// 改变子组件的值
world.value!.msg = '你好,我的世界!' // !为断言,防止为空报错
feature.value!.plan = '你好,我的未来!'
// 改变后
console.log('改变后1',world.value);
console.log('改变后2',feature.value);
// 调用子组件的方法,也可以不用问号,可以传参
world.value?.seyHello('1111')
feature.value?.toDraw('2222')
}
return {feature,world,change}
}
})
</script>
2.子组件1 - MyWorld
<template>
<div class="world">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ref,toRaw } from 'vue'
export default defineComponent({
setup(){
let msg = ref('我的世界');
const seyHello = (str:string) => {
console.log(msg.value + str);
}
return { msg,seyHello }
}
})
</script>
3.子组件2 - Feature
<template>
<div class="feature">
<h1>{{ plan }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ref,toRaw } from 'vue'
export default defineComponent({
setup(){
let plan = ref('我的未来');
const toDraw = (str:string) => {
console.log( plan.value + str );
}
return { plan,toDraw }
}
})
</script>
原载:
(https://www.cnblogs.com/wxhcode/p/15905693.html)