文章目录
一、vue-组件传值方式-父子组件传值解决方案-js版
1. 父子组件传值-方式一 【props / $emit 】
父传子:
场景:
实现方式:父组件绑定属性,子组件使用props接受,对应的属性
注意:父组件绑定属性,不是变量的话可以省略冒号,需要是变量不可省略冒号
举例:
父组件定义三种写法:
-
写法一:v-bind
注意:
使用v-bind的时候msg里面的字符串需要单引号。 -
写法二:v-bind简写方式:
-
写法三:还有一种直接写msg
子组件定义:
子传父:事件触发的方式
场景:
子组件:
this.$emit('事件名',参数值)
父组件:
- 引用子组件上绑定子组件调用的事件名
- 父组件定义引用子组件上绑定子组件调用的事件
- 父组件引用传递的属性
举例:
子组件代码实现:
父组件代码实现:
2. 父子组件传值-方式二 【$parent/ children 】
语法:
获取父组件:this.$parent
获取子组件:this.$children
举例:父组件获取子组件
结果显示:
子组件获取父组件
结果显示:
除了获取属性,方法或者其他也是可以在子或者父组件中触发的。
3. 父子组件传值-方式三 【$ref 】
父获取子组件属性、方法
实现方式:父组件引用子组件的时候 ref定义名字
在父组件引用:this.$refs.[ref定义的名字]
结果显示: