vue3组件通信方式

vue3组件传值共8种方式

1. props传值

props适用于父传子，有两种写法，混合写法和纯vue3写法（语法糖）

1. 混合写法（不推荐！！！）

// 父组件
<script setup lang="ts">
import child from '../components/Child.vue'
</script>

<template>
  <child msg="父组件的消息"/>
</template>


// 子组件
<script>
export default {
   
  props: ["msg"], // 这行要写，不然下面接收不到
  setup(props) {
   
    console.log(props)
  },
}
</script>

<template>
  <div class="greetings">
    <h1 class="green">{
   {
    msg }}</h1>
  </div>
</template>

2. 纯 Vue3 写法(语法糖)

父组件变，子组件如下：

<script setup lang="ts">
defineProps<{
     
  msg: string
}>()
</script>

<template>
  <div class="greetings">
    <h1 class="green">{
   {
    msg }}</h1>
  </div>
</template>

当js逻辑中需要使用传过来的props时，也可以定义一个变量承接一下：

<script setup lang="ts">
const props = defineProps<{
     
  msg: string
}>()

console.log(props)  // Proxy {msg: '父组件的消息'}
</script>

注意：如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性
如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性。所以官方也不推荐混合写法。

2. attrs传值（父传子）

attrs包含了父作用域里除 class 和 style 除外的非props 属性集合

// 父组件
<script setup lang="ts">
import {
    reactive } from 'vue'
import child from '../components/Child.vue'
const info = reactive(