原文链接：blog.csdn.net/iiichigo/ar…
1、父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化
注意：父组件和子组件并不是共用同一个数据，而是父组件将自己的数据复制了一份传给子组件，父组件数据变化时都会重新传值dom也会重新渲染 但子组件不能去直接修改父组件的值
// 父组件
<template id="app-father">
<div>
<input type="text" v-model='message' >
<h2>{{message}}</h2>
<app-son :message="message"></app-son>
</div>
</template>
Vue.component('app-father',{
template:'#app-father',
data(){
return{
message:''
}
}
})
// 子组件
<template id="app-son">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</template>
Vue.component('app-son',{
template:'#app-son',
props:['message'] // 自组件利用props属性接收数据
})
2、父组件将自己的方法传递给子组件，子组件调用方法传数据给父组件
// 父组件
<template id="app-father">
<div>
<h2>app-fatehr</h2>
<h2>{{money}}</h2>
<app-son :get-money="giveMoney"></app-son>
</div>
</template>
Vue.component('app-father',{
template:'#app-father',
data(){
return {
money:100
}
},
methods:{
giveMoney(money){
this.money-=money
}
}
})
// 子组件
<template id="app-son">
<div>
<button @click='get'>son-getMoney</button>
<h3>app-son---{{money}}</h3>
</div>
</template>
Vue.component('app-son',{
template:'#app-son',
props:['getMoney'], // 接收的是一个方法
data(){
return{
money:0
}
},
methods:{
get(){
this.getMoney(10) // 调用时可以传参数也可以不传 使用this是因为接收了 就相当是自己的方法了
this.money+=10
}
}
})
3. 父组件给子组件绑定事件
事件的处理程序就是父组件的方法，子组件使用emit来触发函数 参数跟在后面
// 父组件
<template id="app-father">
<div>
<h2>app-fatehr</h2>
<h2>{{money}}</h2>
<app-son @get-money="giveMoney"></app-son>
</div>
</template>
Vue.component('app-father',{
template:'#app-father',
data(){
return {
money:100
}
},
methods:{
giveMoney(money){
this.money-=money
}
}
})
// 子组件
<template id="app-son">
<div>
<button @click='get'>son-getMoney</button>
<h3>app-son---{{money}}</h3>
</div>
</template>
Vue.component('app-son',{
template:'#app-son',
data(){
return{
money:0
}
},
methods:{
get(){
this.$emit('get-money',10) // 后面跟传递的参数
this.money+=10
}
}
})
4. ref通信
// 父组件
<div id="app">
<button @click='get'>get</button>
<app-father ref='kids' v-for='x in 10'></app-father>
</div>
new Vue({
el:'#app',
methods:{
get(){
this.$refs.kids.forEach(element => { // 这时的kids是一个数组
console.log(element.message)
});
}
}
})
// 子组件
<template id="app-father">
<input type="text" v-model="message">
</template>
Vue.component('app-father',{
template:'#app-father',
data(){
return{
message:'hello vue.js'
}
}
})
5. 使用event bus事件总线
// 父组件
<template id="app-father">
<div>
<button @click='hint'>hit</button>
<app-son></app-son>
</div>
</template>
// 使用event bus 事件总线来传递数据
var bus = new Vue()
Vue.component('app-father',{
template:'#app-father',
methods:{
hint(){
bus.$emit('son-toCry') // 触发bus上绑定的son-toCry函数
}
}
})
// 子组件
<template id="app-son">
<div>
</div>
</template>
Vue.component('app-son',{
template:'#app-son',
methods:{
cry(){
console.log('wuwuwuwu.........')
}
},
// 在初始化的时候绑定事件
mounted(){
bus.$on('son-toCry',()=>{
this.cry()
})
}
})
6、使用$root,$parent,$children
在每一个组件的实例身上，都有parent,$children来指向最外面成根实例、父组件实例、子组件实例们，所以，理论上来说，因为存在一条关系链，所以任意的组件都能找到除了它之外的任意的组，这样的话我们就可以进行任意的通信,更改数据、调用方法。但是，不要这么做，因为组件的作用域应该都是独立的
比如，数据放在子组件身上，让父组件去改，这种思路本身就是不科学的，所以应该数据放在父组件身上，父组件把数据传递给子组件，父组件更改数据的时候，子组件也就改了
<div id="app">
<button @click='get'>btn</button>
<app-father></app-father>
</div>
new Vue({
el:'#app',
data:{
message:'app'
},
methods:{
get(){
console.log(this)
console.log(this.$children[0].message) // console.log(father)
}
}
})
// 父元素
<template id="app-father">
<div>
<button @click='get'>btn</button>
<app-son></app-son>
</div>
</template>
Vue.component('app-father',{
template:'#app-father',
data(){
return {
message:'father'
}
},
methods:{
get(){
console.log(this)
console.log(this.$children[0].message) // console.log(son)
}
}
})
// 子元素
<template id="app-son">
<div>
<button @click='get'>btn</button>
</div>
</template>
Vue.component('app-son',{
template:'#app-son',
data(){
return {
message:'son'
}
},
methods:{
get(){
console.log(this)
console.log(this.$parent.$parent.message) // console.log(app)
}
}
})
