组件通讯的关系: 父子组件通讯,兄弟组件通讯,跨级组件通讯。
父子组件通讯
<!--
当子组件像父组件传递数据时,就要用到自定义事件了。
Vue组件通讯模式
观察者模式 dispatchEvent和addEventListener
子组件用$emit() 来触发事件
this.
$emit(
"addNum",
this.
count);
父组件用$on() 来监听子组件的事件
<
brother
// v-model还可以创建自定义表单输入组件,进行数据绑定
v-model="
modelNum" // 子组件事件
this.
$emit(
"input",
this.
modelNum);
@addNum="
emitEventAdd" //触发自定义事件
@click.native="
clickComponent" // 原生事件
></
brother
>
父组件也可以直接在子组件的自定义标签上使用v-on
来监听子组件触发的自定义事件
v-on 除了监听DOM事件,也可以用.native监听DOM原生事件.监听的是该组件的根元素
v-model
this.$emit('input', number);
-->
Bus /中央事件总线bus 、父链和子组件索引
/**
* 创建一个空的vue实例
* bus能够轻量巧妙的实现 父子 兄弟 跨级组件的通讯。
* 如果深入使用。也可以添加data,methods,computed等选项,这些都是公开的。
* 在遇到一些需要共享信息的时候,只需要在初始化Bus时获取一次,
* 任何事件,任何组件就可以使用了
*
* 如果项目比较大,可以选择更好的解决方案Vuex
*
* 除了中央事件总线Bus,还有两种方式能够实现组件通讯:
* 父链 和 子组件索引 递归向上或向下无限访问
* this.$parent 访问父组件。
* this.$children 访问子组件
*
* $refs只在组件渲染完成后才填充。并且是非响应式的。
* 它仅仅是作为直接方位子组件的应急方案。
*/
Bus
触发:
Bus.
$emit(
"sendMessage",
this.
message);
响应:
Bus.
$on(
"sendMessage",
val
=> {
this.
message =
val +
"-" +
Bus.
busMessage;
});
父链
this.$parent 可以直接访问父组件的实例或者组件
this.
$parent.
h3Message =
"from one";
子组件索引
通过this.$children来遍历找到子组件比较困难,通过ref指定一个索引名称
<
two
ref=
"two"
></
two
>
this.
$refs.
two.
parentMessage =
"from index";