vue3 父子组件间相互传值方式

目录

• vue3父子组件相互传值
• 父向子传值
• 子组件向父组件传值
• vue3父子组件传值的注意事项
• 解决办法：两种

vue3父子组件相互传值

父向子传值

父

父组件只需在子组件上声明一个变量即可。 :代表变量，可以传变量;否则只能传常量

子

export default {
    props:['pieData'],
    setup(props,ctx) {
        const pie_data = props.pieData

子组件中需要在props中声明需要接收的变量名，setup中需要引用props，赋值时用props.变量名接收。return出去就可以用了

子组件向父组件传值

父

 
const e_flag = ref(false);
    const get_e_flag = (e) => {
      e_flag.value = e;
    };

父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量

子

setup(props, ctx) {
    ……
    const spyder_go = () => {
        ctx.emit('e_flag',e_flag.value)

子组件中需要在setup中使用ctx，使用ctx.emit向父组件传值。该方法需要调用，比如点击或者onMounted

vue3父子组件传值的注意事项

当你在进行父子组件传值的时候报警告：

Property “value” was accessed during render but is not defined on instance.
at

warn]: Extraneous non-emits event listeners (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
at
at

然而在vue2中就不报这个警告。

解决办法：两种

1.在接收的参数后边跟上类型就OK（ts）

2.用emits:[‘接收你推送的事件’]（js）

以下是代码分析

我用的是 ts+vue3

首选我们对比vue2来看，vue3在写法发生了不小的变化，最典型的例子就是vue3通过ref，或者reactive实现数据的响应式。因为ref和reactive的出现，使得vue3中父子组件的传值方式也发生了变化

咱们先看下vue2中的写法

父子组件传值 props / this.$emit

• 父组件向子组件传值：在子组件标签上绑定自定义属性名(:child = ‘value’)，值是父组件要传递的数据，在子组件内部通过props 属性来接收 ‘自定义属性名’，页面在展示上，通过接收的 {{属性名}} 显示。（父子之间是上下传值）
• 子组件向父组件传值：在子组件标签上绑定自定义事件(@change= ‘change’)，子组件内部通过 $emit 给该事件推送数据 (this. $emit(‘绑定的自定义事件名’,this.数据))。父组件内部通过“函数参数”接收。（子组件之间是平行传值）

父组件

子组件

但是vue3中，是不存在this的，vue3中将数据和函数都封装在了setup中，那么vue3是怎么实现的呢？

我们知道vue3中的setup接收两个参数， 

• 第一个参数是props，即父组件向子组件传递的props值，
• 第二个值为context，这个值代表了当前的上下文对象，

知道这个东西以后现在来实现vue3的父子组件传值。

vue3中父传子和vue2中的父传子一样，再次不做过多阐述，下面重点关注的是vue3的子传父

父组件

子组件：

看下效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。