父子组件通信
- 理解: data选项为什么是一个函数?
- 组件是一个聚合体,也是一个整体,它需要一个独立的作用空间,也就是它的数据需要是独立的,目前js的最大特点是函数式编程,而函数恰好提供了一个独立作用域,所以我们data在出根组件外都是函数
- 理解: 为什么data函数需要返回一个返回值,返回值还是对象,不能是数组吗?
- Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置,而data选项是作为Vue深入响应式核心的选项
- 过程
- 父组件将自己的数据同 v-bind 绑定在 子组件身上
- 子组件通过 props属性接收
<template id="father">
<div>
<h3> 这里是father </h3>
<Son :money = "money"></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是son </h3>
<p> 我收到了父亲给的 {{ money }} </p>
</div>
</template>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 10000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['money']
})
new Vue({
el: '#app'
})
</script>
- props属性数据验证
- 验证数据类型
- 验证数据大小【 判断条件 】
props: {
'money': {
validator ( val ) {
return val > 2000
}
}
}
- 工作中: 第三方验证
- TypeScript [ TS ]
- 插件 vue-validator 等
子父组件通信
- 是通过自定义事件
- 事件的发布
- 通过绑定元素身上实现
- 事件的订阅
- 通过this.$emit触发
// html
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> 这里是father </h3>
<p> 我现在有 {{ gk }} </p>
<Son @give = "fn"></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是son </h3>
<button @click = "giveHongbao"> 给父亲红包 </button>
</div>
</template>
Vue.component('Father',{
template: '#father',
data ( ) {
return {
gk: 0
}
},
methods: {
fn ( val ) {
this.gk = val
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
money: 5000
}
},
methods: {
giveHongbao () {
this.$emit('give',this.money)
}
}
})
new Vue({
el: '#app'
})
非父子组件通信
- ref链
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/475426ed009214e76af0cad5fa0f8e58.png)
- bus事件总线
var bus = new Vue()
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son',
data () {
return {
flag: false
}
},
mounted () {
var _this = this
bus.$on('cry',function () {
_this.flag = true
})
}
})
Vue.component('Girl',{
template: '#girl',
methods: {
kick () {
bus.$emit('cry')
}
}
})
new Vue({
el: '#app'
})
非常规手段进行组件通信 【 不推荐 】
- 建议: 如果标准方案可以实现,就不要用非常规手段
- 1. 可以实现子父通信
- 父组件通过 v-bind 绑定一个方法给子组件
- 子组件通过 props选项接收这个方法,然后直接调用
- 2. 父组件 通过 v-bind 绑定 一个对象类型数据 给子组件
3. 子组件直接使用,如果更改这个数据,那么父组件数据也更改了
- 原因: 同一个地址
- 非常规在哪里?
- 违背了单向数据流