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组件间通信知识整理——子组件向父组件传参_第1张图片
这是我最常用的子组件向父组件传值改值的方法,在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中的provideinject也可以实现子传父呢?经过测试应该也是可行的。

// 父组件
<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>

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

初始状态
点击按钮一点击按钮二

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

总结

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

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

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

你可能感兴趣的:(javascript,前端,vue.js)