Vue中的一些进阶使用

Vue中的组件通信

父子组件通信

• 父组件订阅$emit('func', xxx)，子组件绑定@func="xxxFunc()"触发。（观察者模式）
• 引用refs，通过this.refs.comp.xxx，引用子组件的数据
• 子元素children，this.children[0].xx = 'xxx'，获取或者set子组件数据。这里的children[0]不可修改。

兄弟组件通信

• 通过共同祖辈通信 （需要父组件或者根组件是同一个）

  this.$parent.$on('foo', (aaa) => {
       
  	// 接收传参aaa
  })  // A 组件 监听
  this.$parent.$emit('foo', aaa)    // B 组件 订阅
  

祖先和后代传参

由于嵌套层数过多，props用起来很麻烦。vue提供了provide/inject传参，可以实现祖先给后代传值。反过来，后代传递给子就不太行了。

// 父
provide(){
   
	return {
    
		foo: 'foo',
		foo: this.foo  // 这里的可以是data中的动态值。
		setFoo: (xxx) => {
   
			this.foo = xxx // 如果要改动inject的值。
		}
	},
}
// 子
inject: ['foo']

事件总线 $bus

使用实例

1. 新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js
   内容如下：

import Vue from 'vue';
export default new Vue();

2. 在孙子组件和爷爷组件中，都需要引入这个bus.js

import Bus from 'common/js/bus.js';
// 孙子组件
```js
addCart(event) {
   
 //如果传递参数的话，可以如下这样写
 Bus.$emit('getTarget', event.target);
 //如果不传递参数可以如下；
 Bus.$emit('getTarget');
}

// 爷爷组件
created() {
   
 //如果传递参数的话，爷爷组件需要这样接收
 Bus.$on('getTarget', target => {
   
  console.log(target);
 });
 //如果不传递参数的话，则可以如下处理
 Bus.$on('getTarget',()=>{
   
 //此处执行对应的函数操作
 })
}

Vuex状态管理工具通信

通过绑定一写getter dispatch murtation state 通信。

这类比较麻烦，个人不是很喜欢。一般的场景还是用以上四点即可。

插槽

• 匿名插槽

// 父组件
<childComp>
	<div>xxx</div>
</childComp><