非父子组件之间通信

非父子组件之间通信

原始方法是新new一个vue空实例作为中央事件总线bus但是比较麻烦有兴趣的可以搜一下看看，这里不再说了。

下面提供两种方便的方法

一、父链

在子组件中，使用this.$parent可以直接访问该组件的父实例或组件

在父组件中，也可以通过this.$childen访问他的所有组件而且可以递归向上或者向下无限访问，知道根实例或最内层的组件

示例代码如下：

这里用的HbuilderX快速新建Vue工程模板

新建完成就是这样的，添加测试子组件，这里用App.vue作为父组件。

父组件：App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
	<span>{{message}}</span>
	<test  ref="test"></test>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Test from './components/test.vue'
import Bus from './components/bus.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,Test,Bus
  },
  data (){
	  return {
		  message:''
	  }
  },
  methods:{
	  
  },
  mounted(){
	  var _this = this
	  Bus.$on('on-message',function(msg){
		  console.log(msg)
		  _this.message = msg
	  })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件：test.vue

<template>
	<div id="test">
		<button @click="clickChange">点击事件</button>
	</div>
</template>

<script>
import Bus from './bus.vue'
export default{
	name:'test',
	props:['value'],
	components:{
		bus:Bus
	},
	data(){
		return{
			counter:0
		}
	},
	methods:{
		clickChange (){
			this.$parent.message = '来自子组件的消息'
		}
	}
}
</script>

<style>
</style>

看效果，点击按钮，弹出“来自子组件的消息”

二、子组件索引

父组件调用子组件方法或属性用 this.$refs，这是vue提供的子组件索引的方法，方便快速找到需要的子组件，

<test  ref="test"></test>需要在组件中设置一个名称，然后按照以下方式调用。不再演示。

 this.$refs.test.counter = 100

写这个是因为在开发的时候总是忘记，加深以下记忆。