插槽和自定义指令

父子组件通信：

这里是father

这里是son

我收到了父亲给的 {{ money + 100 }}

Vue.component(‘Father’,{
template: ‘#father’,
data () {
return {
money: 3000
}
}
})

Vue.component(‘Son’,{
template: ‘#son’,
// props: [‘money’]
// 数据验证
// props: {
// ‘money’: Number
// }
props: {
‘money’: {
validator ( val ) { // 验证函数
return val > 2000
}
}
}
})

new Vue({
el: ‘#app’
})

子父组件通信：

这里是father

我现在有 {{ gk }}

这里是son

Vue.component(‘Son’,{
template: ‘#son’,
data () {
return {
money: 5000
}
},
methods: {
giveHongbao () {
this.$emit(‘give’,this.money)
}
}
})
new Vue({
el: ‘#app’
})

子组件通信：

这里是父组件

这里是son组件

o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

这里是girl组件

非常规通信方案1：

father组件

{{ gk }}

son组件

非常规通信方案2：

father组件

{{ money.num }}

son组件