1、父子组件之间的传值
父组件向子组件传值
1、父组件引用子组件,并且通过v-bind:的形式,把需要传递给子组件的信息传递给子组件
在子组件中通过props去接收父组件传递过来的数据
2、父组件向子组件传递一个方法
父组件向子组件传递方法的时候,在父组件中定义一个方法,然后在子组件中用@方法名="父组件方法"的形式接收
在子组件中定义一个方法,或者是在mounted中,通过
this.$emit(‘方法名’,参数)的方式去接收
子组件向父组件传值
1、在父组件向子组件传递方法的时候可以传递参数
2、兄弟组件的EventBus传值
写一个公共的Bus事务
注册事件:this.bus.
o
n
(
)
触
发
事
件
:
t
h
i
s
.
b
u
s
.
on() 触发事件:this.bus.
on()触发事件:this.bus.emit()
3、vuex
状态管理工具
4. parent /parent/root / $children
子组件A和子组件B都是父组件W的子组件,
子组件A:this.
p
a
r
t
e
n
t
.
partent.
partent.on(‘confirm’,handleConfirm)
子组件B:this.
p
a
r
t
e
n
t
.
partent.
partent.emit(‘confirm’,list)
获取子组件的数据
this.$children[0].msg
获取根组件的方法
this.$root.handleRoot()
5、$ref (引用的方式获取子节点)
常用于父组件调用子组件的方法
在父组件中引入子组件,并在子组件中写ref=“XXX”,然后调用子组件的方法:
this.$refs.hello.handleRef()
6、attrs/listeners(常用于对原生组件的封装)
$attrs可以获取父组件传递进来但是没有通过props接收的属性
$listener会展开父组件的所有监听的事件(click事件等)
常用于更加高级的封装
7、provide / inject
常用一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式
类似于React中的context