Vue.js组件通信详解-优快云博客

组件注册
Vue.component(组建名称, 组件的配置)
在组件中使用components的配置项来表示
问题：
组件命名问题
组件命名和html原生标签冲突 Header Footer ----> header footer

大驼峰的写法

Vue.componennt(‘ZhangJun’,{
template: ‘

’
})

.box{
background-color: red
}

box.style.backgroundColor = ‘red’

组件通信
注意：组件通信，无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

父子组件通信

绑定的是简单类型数据
父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流
子父通信（效果上像，间接的使用了父组件的东西）【不推荐大家使用】

绑定复杂数据类型 --------

父组件中的数据是一复杂数据类型，那么父组件绑定数据的时候，给子组件的是一个引用地址
子组件可以通过这个引用地址，修改这个数据
效果上像，子组件和父组件通信了，违背单项数据流
父组件可以传递一个方法给子组件

父组件定义方法，然后将这个方法通过单向数据绑定的形式传递给子组件
子组件通过props属性接收，然后通过 @click = “方法名”
通过自定义事件来实现通信

父组件中定义数据和方法（方法时用来操作数据的）

在子组件身上绑定自定义事件

子组件定义方法，在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

I am king

国库中有：{{ gk }} 钱

Vue.component(‘King’,{
template: ‘#king’,
data () {
return {
gk: 0
}
},
methods: {
get( value ){
this.gk += value
}
}
})
Vue.component(‘people’,{
template: ‘#people’,

data () {
  return {
    money: 2000
  }
},
methods: {
  give () {
    this.$emit('get', this.money/2)
  }
}

})
new Vue({
el: ‘#app’
})
非父子组件通信

使用ref来绑定组件，（注意：ref也可以绑定DOM元素）【ref链】

在父组件的模板中，使用ref = refName 绑定在两个兄弟组件身上
在任意一个子组件中，就可以通过 this.parent.parent.refs.refName 就可以获得另一个子组件了，同时这个自组件身上的数据和方法同样也得到了
通过事件总线（bus）

它是通过事件的发布（声明），以及事件的订阅（触发）来做的
首先在js中创建一个bus对象（vm）
var bus = new Vue()
1
在Count组件中定义数据，和修改数据的方法
在Count组件中通过 created 钩子，进行bus事件的发布
created: {
bus.$on(‘add’,this.addCount)
}

在MyButton组件的方法中通过 bus进行事件的订阅
increment () {
bus.$emit( ‘add’ )
}

多组件状态共享

使用 Vue-Router
使用状态管理工具 Vuex