vue3中子父组件传值通信的9种方法
2023年5月 · 预计阅读时间： 2 分钟
vue3 中子父组件传值通信的 9 种方法#
1 props 传参#
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import Child3 from './components/Child3.vue'
const data = reactive({
lifebar: 100,
child1_lifebar: 0
})
const child1ref: {
value: {
/**生命值 */
lifebar: number
/**加血 */
addLifebar: () => void
}
} = ref<T>()
const child2ref = ref()
/**自身加血 */
const addLifebar = () => {
data.lifebar++
}
/**给队友加血 */
const addTeammateLifebar = () => {
console.log(child1ref.value)
console.log(child1ref.value.lifebar)
child1ref.value?.addLifebar()
}
onMounted(() => {
console.log('父组件加载完毕')
console.log(child1ref.value.lifebar)
data.child1_lifebar = child1ref.value.lifebar
})
</script>
<template>
<div class="main">
<div style="height: 60px; display: flex; align-items: center; justify-content: center">
我是父组件蔡文姬
<el-space style="margin-left: 5px">
<el-button @click="addLifebar">给自身增加1点血量</el-button>
<el-button @click="addTeammateLifebar">1-给子组件1马可波罗加1点血(父组件调用子组件函数)</el-button>
</el-space>
</div>
<div style="height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: start">
<div><b>父组件蔡文姬信息</b></div>
<div>
当前血量:<b>{{ data.lifebar }}</b>
</div>
<div>
<!-- 这里没有自动刷新，暂时没有找到原因 -->
2-探测到的子组件1马可波罗当前气值(父组件调用子组件参数):<b>{{ data.child1_lifebar }}</b>
</div>
</div>
<div class="box-content">
<div class="left-box">
<Child1 ref="child1ref" :lifebar="data.lifebar"></Child1>
<Child3></Child3>
</div>
<div class="right-box"><Child2></Child2></div>
</div>
</div>
</template>
<style scoped lang="scss">
.main {
width: 80%;
height: 800px;
margin: auto;
border: 2px solid yellowgreen;
.box-content {
width: 100%;
height: calc(100% - 200px);
display: flex;
justify-content: space-around;
align-items: center;
.left-box {
width: 45%;
height: 100%;
border: 2px solid hotpink;
position: relative;
}
.right-box {
width: 45%;
height: 100%;
border: 2px solid hotpink;
}
}
}
</style>