vue3之父子组件之间的通信

一、vue3组件之间的通信

1.父传子defineProps

defineProps是vue3的一个宏函数，使用时可不导入

//父组件
<script setup>
    import Header from './components/Header.vue'

    //传入子组件的值
    const propsObj = {
      name: "milan",
      num: 10
    }
</script>/

<template>
  <Header propsMsg="我是父组件传过来的值" :="propsObj"/>
</template>

//子组件
<script setup>
  import { ref } from "vue";

  //接收父组件传过来的值
  const props = defineProps({
    propsMsg: String,
    name: String,
    num: {
      type: Number,     //值的类型
      required: false,  //是否为必传值
      default: 2，      //默认值
      validator: (value) => {
            return value >= 0 && value <= 10
        }               //自定义验证
    }
  });
</script>

<template>
  <h1>{{ props.propsMsg }}</h1>
  <div>对象里面的值{{ props.name }}{{ props.num }}</div>
</template>

 若想要响应式数据可用reactive定义

//父组件
<script setup>
  import Header from './components/Header.vue'

   //传入子组件的值
  const propsObj = reactive({
      name: "milan",
      num:10
  })
  //父组件事件
  const addNum = ()=>{
    propsObj.num++
  }
</script>/

<template>
  <Header propsMsg="我是父组件传过来的值" :="propsObj"/>
  <button @click="addNum">添加</button>
</template>

注：defineProps只能在setup中使用，且只能在setup的顶层使用，不能在局部作用域使用；

        和vue2一样的原则，defineProps声明的props的值是只读readonly的，不能修改；

2.子传父defineEmits

defineEmits是vue3的一个宏函数，使用时可不导入

//父组件
<script setup>
  import Header from './components/Header.vue'
  import {reactive} from 'vue'

  //接收子组件的传值
  const emitsGetInfo = (data) =>{
    console.log('对象',data)
  }
  const emitsgetNum= (data) =>{
    console.log('数字',data)
  }
</script>

<template>
  <Header @getInfo="emitsGetInfo"  @getNum="emitsgetNum" />
</template>

//子组件
<script setup>
  import { ref } from "vue";

  //传值给父组件
  const emits = defineEmits(["getInfo","getNum"]) //参数为数组
  emits("getInfo",{name: '米岚',age: 20})   //第一个参数为具体事件，第二个参数为传的值
  emits("getNum",10)
</script>

<template>
  <h1>子组件</h1>
</template>

3.跨组件通信——依赖注入

provide / inject是vue3中的一种高级的组件间传值方式，它允许祖先组件向后代组件注入数据，而不需要显式地将数据传递给中间组件。（若使用了provide和inject来进行数据传递。则一般不需要再使用defineProps）

//爷组件
<script setup>
  import Header from './components/Header.vue'
  import { reactive,provide, ref } from 'vue'

  //传入后代组件的值
  const userInfo = reactive({
    name: "milan",
    num:10
  })
  //传入方法
  provide('provideUserInfo',userInfo)

  //定义函数
  const numberAdd = () =>{
    userInfo.num++
  }
  //传入给子组件的函数
  provide('provideFuncNumberAdd',numberAdd)
</script>

<template>
  <div>看看传入子组件的方法{{ userInfo.num}}</div>
</template>

//父组件
<script setup>
  import Nav from "./Nav.vue";
</script>

<template>
  <Nav/>
</template>

//孙组件
<script setup>
    import { inject } from 'vue'

    //接收祖先组件的传值
    const userInfo = inject("provideUserInfo")
    const fucNumberAdd = inject("provideFuncNumberAdd")

    //如果上级组件没有传值过来 inject 的第二个参数可设置默认值
    //const userInfo = inject("provideUserInfo","没有传值的话我就是默认值")
    
</script>

<template>
  <h1>我是子组件</h1>
  <div>爷组件的传值{{ userInfo.name }}</div>
  <button @click="fucNumberAdd">使用爷组件传过来的方法</button>
</template>

注：经测试，若爷组件和父组件同时提供了一个相同关键字的值，子组件接收了父组件的值。