Vue3组件通信-学习记录

背景：

        由于业务中用父子通信很少，猛然用一次都忘了怎么用了。复习之后特此记录下加深印象。

一、父组件向子组件传递信息：

        子组件中通过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两种方法。后续待更新