关于Vue访问子组件相关操作

1.Vue里明确拿到某一子组件

通过传统
1.给子组件加上ref属性

<childComponent id="home" ref = "home_ref">

2.在方法中可以这么得到子组件，并调用子组件中的方法和属性

backClick() {
	console.log(this.$home_ref.message)
	this.$home_ref.scroll.scrollTo(0, 0, 500);

},

2.Vue某个子组件发生点击需要在另一个子组件进行操作

一个方法是组件二emit点击事件出来，主组件进行接受，然后ref访问组件一；
第二种更简洁的方法的是直接通过.native对组件进行监听，直接从主组件访问组件一

具体代码如下：

<childComponent id="home" @click.native= "backClick">

.......

backClick() {
	this.$refs.scroll.scrollTo(0, 0, 500);
	// console.log(this.$refs.scroll.message);

},

3.多层组件事件管理：事件总线

如下图，组件一中发生某事件后，需要调用组件3中的方法。
比较麻烦的办法是通过父子组件一层一层将事件传到主组件中，然后通过主组件利用ref访问组件3中的方法。
第二种方法是利用事件总线，和Vuex很像，不管理状态，管理事件监听。组件1通过this.$bus.$emit(’’)发出事件，主组件可以通过this.$bus.$on(’’,function)进行接受并处理。
需要注意的是，vue本来是没有$bus了，需要在原型里添加$bus，简单来说，需要在main.js里加入以下代码

Vue.prototype.$bus = new Vue()

3.Vuex