vuejs父子组件通信

工具使用

• 包管理：npm
• 构建工具：grunt
• 模块加载器：webpack

传递数据

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
在子组件 jade模板中，书写

.hot-item-container(@click="openHotPlugins(item.appkey)")

在子组件 export default中，书写

 props: [
     'item'
 ]

prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态。不过，也可以使用 .sync 绑定修饰符显式地强制双向或单次绑定：
在父组件 jade模板中，书写

  .hot-item-container(':item.sync'='item')

父子组件通信

子组件可以用 this.$parent 访问它的父组件。父组件有一个数组 this.$children，包含它所有的子元素。
这让父组件与子组件紧密地耦合，Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，做法也不同。

每个 Vue 实例都是一个事件触发器：

$on() 监听事件$emit() 在Vue 实例上面触发事件；
$broadcast() 广播事件，事件向下传导给所有的后代。$dispatch() 派发事件，事件沿着父链冒泡；

以点击侧栏主面板响应为例，在子组件export default中，书写

 methods:{
     selectNav(event){
         this.$dispatch('selectNav',event.target.innerHTML)
     },
}

在父组件 export default中，书写

events:{
     selectNav(title){
         this.appTitle = title
         if(title !== '全部应用'){
             this.hotshow = false;
         }else{
             this.hotshow = true;
         }
    }
}

由此实现了子模板到父模板的数据传递和事件触发，达到了主面板响应的目的
经过初步实践，这样的传递数据和父子组件通信，给开发者的感觉是思维清晰，容易上手，必要的组件分割不因为依赖束手束脚~