<div class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</div>

Vue.component('book-component', {
 template: tpl,//可以传进来子组件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>

//找到子组件并且调用它的方法
var myChild = this.$refs.child;
mymyChild.func();

//找到父组件并且调用它的方法
var myParent = this.$parent;
mymyChild.func();

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

//找到父组件的$refs对象，然后找到组件的兄弟组件
 var $refs = this.$parent"htmlcode">

//平行组件之间的通信
getComponentByRef: function(refId) {
  var $refs = this.$parent"htmlcode">

//在组件中直接使用
this.getComponentByRef("booknode").updateNode(this.node);


4.组件间复杂数据通信Vuex
一说到vuex，很多刚开始接触vue的人会主动避免去使用它，其实它并没有想象中的那么复杂。最好的开始是引入vuex后，走一遍给出的小示例。但是如果你的项目并不复杂的话，可以不考虑状态管理，那么什么时候需要使用状态管理呢？
我们来看这样一个布局

如果component1中的某个数据变更，那么com2,com3也要跟着更新，此时com3中又细分为了三个小组件。
问题：

  
多个试图依赖同一个状态
  
多层嵌套的组件，数据变更和代码维护困难

那这样的情况时，我们可以考虑使用状态管理。下一篇文章将详细讲解关于vuex的实践和理解。
写在最后的总结
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。