Skip to content

一、vue-组件传值方式-父子组件传值方式

1. 父子组件传值-方式一 【props / $emit 】

父传子: 场景: 67119247.png 实现方式:父组件绑定属性,子组件使用props接受,对应的属性 注意:父组件绑定属性,不是变量的话可以省略冒号,需要是变量不可省略冒号 举例: 父组件定义三种写法:

  • 写法一:v-bind 38959652.png 注意: 使用v-bind的时候msg里面的字符串需要单引号。

  • 写法二:v-bind简写方式: 39025161.png

  • 写法三:还有一种直接写msg 39074269.png

子组件定义: 39257144.png

子传父:事件触发的方式 场景: 67189719.png 子组件:

this.$emit('事件名',参数值)

父组件:

  1. 引用子组件上绑定子组件调用的事件名
  2. 父组件定义引用子组件上绑定子组件调用的事件
  3. 父组件引用传递的属性 举例: 子组件代码实现: 41000754.png 父组件代码实现: 41246083.png

2. 父子组件传值-方式二 【$parent/ children 】

语法:

获取父组件:this.$parent
获取子组件:this.$children

举例:父组件获取子组件

85db1477-8f25-4d5d-91da-f4c21cde8e2b.png 结果显示: 45443162.png 子组件获取父组件 45792814.png 结果显示: 45757515.png 除了获取属性,方法或者其他也是可以在子或者父组件中触发的。 46359801.png

3. 父子组件传值-方式三 【$ref 】

父获取子组件属性、方法 实现方式:父组件引用子组件的时候 ref定义名字 在父组件引用:this.$refs.[ref定义的名字] 47531842.png 结果: 47595202.png

Released under the MIT License.