背景:
由于业务中用父子通信很少,猛然用一次都忘了怎么用了。复习之后特此记录下加深印象。
一、父组件向子组件传递信息:
子组件中通过defineProps进行变量定义以及类型定义。这里使用msg作为变量,类型为String
<!-- Son子组件 -->
<template>
<div>
<h1>这是Son组件,我收到的信息为:{{ msg }}</h1>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
msg: String
})
</script>
<style scoped>
</style>
父组件中,首先引入子组件,在子组件中通过 :msg="sendmsg"进行信息传递。
<!-- Parent父组件 -->
<template>
<div class="parent">
<h1>这是父组件</h1>
<div class="son">
<Son :msg="sendmsg"/>
</div>
</div>
</template>
<script setup>
import Son from "./Son.vue";
import { ref } from "vue";
const sendmsg = ref("这是父向子传递信息");
</script>
<style scoped>
.parent {
border: 2px solid #bfa;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 50vw;
height: 50vh;
border: 1px solid black;
}
</style>
结果如下:
二、子组件向父组件传递信息
子传父,使用的是defineEmits,通过emit方式进行信息传递。
子组件如下:
<!-- Son子组件 -->
<template>
<div>
<h1>这是Son组件</h1>
<button @click="sendToParent">点击发送信息给父组件</button>
</div>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['send-to-parent'])
const sendToParent = () => {
emit('send-to-parent', '我是子组件传递过来的信息')
}
</script>
<style scoped>
</style>
父组件通过自定义事件@XXX=""进行接收信息,注意这里是@XXX,不要和父传子搞混,父传子是:XXX=""
然后通过getMsg函数的参数,进行接受子组件传递来的信息。
<!-- Parent父组件 -->
<template>
<div class="parent">
<h1>这是父组件</h1>
<div class="son">
<Son @send-to-parent="getMsg"/>
</div>
</div>
</template>
<script setup>
import Son from "./Son.vue";
const getMsg = (msg) => {
console.log(msg,123);
}
</script>
目前先记录defineProps和defineEmits两种方法。后续待更新