Vue3组件间通信知识整理——子组件向父组件传参

Vue3组件化开发，子组件向父组件传参的场景也是十分之多，通常是用于通知父组件改值，父组件向子组件传递参数。子组件props原则上只读，最好就是通过向父组件传值，调用触发父组件方法达到修改值通信的目的。

子组件向父组件传参

方法一

// 父组件
<script setup>
import { ref } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const str = ref('我是在父组件声明定义的')
const parentClick = (value) => {
  str.value = value
  console.log(value)
}

</script>

<template>
  <div>修改的值在这里： {{ str }}</div>
  <childrenTest_oneVue @changeStr="parentClick"/>
</template>
// -----------------------分界线-------------------------
//子组件

<script setup>
const emit = defineEmits(['changeStr'])

const childClick = (value) => {
  emit('changeStr',value)
}
</script>

<template>
  <button @click="childClick('我来自子组件')">Click me</button>
</template>

浏览器和操作台打印如下⬇

这是我最常用的子组件向父组件传值改值的方法，在Vue3的组合式Api写法下，已经不能使用如this.$emit…来实现子传父了，而在setup语法糖下就是使用defineEmit宏指令来声明子组件在父组件的方法行为，也就是自定义事件。

方法二

// 父组件
<script setup>
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const parentClick = (value) => {
  console.log(value)
}

</script>

<template>
  <childrenTest_oneVue :handleClick="parentClick"/>
</template>

// -----------------------分界线-------------------------
//子组件

<script setup>
const props = defineProps({
  handleClick: {
    type: Function
  }
})


const childClick = () => {
  props.handleClick('HelloWorld! ')
}

</script>

<template>
  <button @click="childClick">Click me</button>
</template>

操作台打印如下⬇

这种子组件向父组件传参的方式就是使用了回调函数，父组件向子组件传递一个回调函数，子组件就可以使用该回调函数作相应的处理。

方法三

按照方法二中使用回调函数实现子传父的思路，是不是使用Vue3中的provide和inject也可以实现子传父呢？经过测试应该也是可行的。

// 父组件
<script setup>
import { ref,provide } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const str = ref('我是在父组件声明定义的')
const parentClick = (value) => {
  str.value = value
  console.log(value)
}
provide('parentHandleClick',parentClick)

</script>

<template>
  <div>修改的值在这里： {{ str }}</div>
  <childrenTest_oneVue/>
</template>

//-----------------------分界线---------------------
//子组件

<script setup>
import { inject } from 'vue'
import childrenTest_twoVue from './childrenTest_two.vue'

const childClick = inject('parentHandleClick')

</script>

<template>
  <button @click="childClick('我来自子组件')">Click me One</button>
  <childrenTest_twoVue/>
</template>

//-----------------------分界线---------------------
//孙组件

<script setup>
import { inject } from 'vue'

const childClick = inject('parentHandleClick')

</script>

<template>
  <button @click="childClick('我来自孙组件')">Click me Two</button>
</template>

浏览器和操作台打印如下⬇

provide和inject通常是配合使用的，父组件中provide提供一个回调函数，子组件甚至是孙组件都可以接收该回调函数进行传值改值。更多关于provide和inject的使用可以看看官方文档https://cn.vuejs.org/guide/components/provide-inject.html#provide

总结

子组件向父组件传参的方法还是比较多的，在不是setup语法糖的写法下，又是略有不同，在重构项目时最常用的就是第一种传值方法，毕竟这是组合式API代替选项式最通用子传父的写法。对于第二、三种方法，我个人是比较少用的，父传子值用defineProps，如果传递的是一个回调函数，会不会容易混淆，导致代码可读性降低呢？使用provide和inject会不会有点大材小用呢？对吧，总之考虑专用性方面还是推荐第一种方法吧。

文章有问题之处还望评论斧正！

更多其他组件间通信文章链接放在下方⬇
Vue3组件间通信知识整理——父组件向子组件传参
Vue3组件间通信知识整理——兄弟组件之间通信
Vue3组件间通信知识整理——父组件调用子组件方法