父子组件之间传递
父 -> 子
(props)属性值方式
-
父组件关键代码:
<template> <Child :child-msg="msg"></Child> </template>
-
子组件关键代码:
export default { name: 'child', props: { child-msg: String //这里指定了字符串类型,如果类型不一致会警 } };
child-msg
为父组件给子组件设置的额外属性值,属性值需在子组件中设置props
,子组件中可直接使用child-msg
变量。
子组件调用父组建
子组件通过 $parent
获得父组件,通过 $root
获得最上层的组件。
provider/inject
简单的来说,就是在父组件中通过provider
提供变量,在子组件中通过inject
来注入组件。不论(子组件有多深,只要调用了inject
那么就可以注入provider
中的数据。而不是局限于只能从当前父组件的prop
属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
实例:
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
子 -> 父
发送/监听事件
-
子组件某函数中发送事件:
this.$emit('eventName','data')
-
父组件中监听子组件事件:
<Child @eventName='todo()'></Child>
eventName
为子组件自定义发送事件名称todo()
为父组件处理方法data
为子组件向父组建传递的参数
父组件直接获取子组建属性和方法
给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。
<!-- ref的值是组件引用的名称 -->
<child-component ref="name"></child-component>
父组件中通过$refs
组件名来获得子组件,也就可以调用子组件的属性和方法了。
let child = this.$refs.name
child.属性
child.方法()
父组件通过 $children
可以获得所有直接子组件(父组件的子组件的子组件不是直接子组件)。需要注意 $children
并不保证顺序,也不是响应式的。
非父子组件
eventBus
目前eventBus
通行方式是解决兄弟组件之间通信的最佳方式。使用方法:
-
定义一个新的vue实例
//eventBus.js import Vue from 'vue' export default new Vue();
-
发送事件(发送数据)
import bus from '@/bus'; //方法内执行下面动作 bus.$emit('childa-message', this.data);
-
组件内监听(接收数据组件)
import bus from '@/bus'; //方法内执行下面动作 bus.$on('childa-message', function(data) { console.log('I get it'); });
vuex方式传值
如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。