相关推荐recommended
vue父子组件之间传值的方法
作者:mmseoamin日期:2023-11-30

vue父子组件之间传值的方法

一、基本父子传值

父传子

方式:

props

vue父子组件之间传值的方法,vue父子组件之间传值的方法,第1张

效果:

把父组件的fatherName属性传入子组件,在子组件中使用

父组件代码:

子组件代码:

子传父

方式:

$emit

效果:

在子组件触发事件,修改父组件的fatherName属性

父组件代码:
父组件

子组件代码:

兄弟传值

方式:

eventBus.js

效果:

任意组件之间相互传值

vue父子组件之间传值的方法,vue父子组件之间传值的方法,第2张

代码:

二、ref 父传子

方式:

$refs

效果:

把父组件的fatherName属性传入子组件,在子组件中使用

父组件代码:

子组件代码:

三、v-model 父子传值

方式:

在父组件中使用 v-model

效果:

父子组件之间相互传值

解释:

v-model 的父子传值模式 其实是 绑定的 value 属性和 input 事件的语法糖,可以由 props+$emit 模式演变而来

vue父子组件之间传值的方法,vue父子组件之间传值的方法,第3张

props+$emit:
父组件代码:

子组件代码:

核心代码改造:






v-model
父组件代码:

子组件代码:

问题:
  • 父组件变量只能叫 value
  • 子组件自定义事件只能叫 input
    解决:

    通过设置 子组件 身上的model属性,来更改变量名name和自定义事件input的问题

    model:{
        prop: 'newValue',
        event: 'newInput'
    }
    
    父组件代码:
    
    
    子组件代码:
    
    
    优势:

    v-model模式父子传值比props+$emit模式更加简单

    缺点:

    不能够一次传递多个属性,通过方法四可以处理

    四.sync修饰符 父子传值

    方式:

    在父组件中使用 绑定修饰符 :newValue.sync = ‘newValue’

    效果:

    父子组件之间相互传值

    解释:

    .sync 的父子传值模式 其实是绑定的属性和事件的语法糖

    :val.sync = ‘val’ 等价于 :val"val" @update:val = “val = $event”

    props+$emit 模式核心代码:
    父组件代码改造:
    
    
    
    
    
    
    子组件代码改造: