组件通信
1. 为什么要进行组件通信?
组件通信可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起的时,这些组件相互之间要建立联系,这个联系我们就称之为通信。
2.组件通信的方式有以下几种(重点)
- 父子组件通信
使用props来实现 - 子父组件通信
自定义事件 - 非父子组件通信
ref链
bus事件总线 - 多组件状态共享(多个组件共用同一个数据)
2.1父子组件通信
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son :money = "money" :mask-flag = "maskFlag"/>
</div>
</template>
<template id="son">
<div>
<h3> 这里是son组件 </h3>
<p> 父亲给了我 {{ money }} 钱 </p>
<p> {{ maskFlag }} </p>
</div>
</template>
Vue.component('Father',{
template: '#father',
data () { // 为什么要将data定义为函数?
return {
money: 2000,
maskFlag: 10000000000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['money','maskFlag']
})
new Vue({
}).$mount('#app')
问题:
-
props
-
在父组件的模板中将数据用单项数据绑定的形式,绑定在子组件身上
<Son :money = "money"/>
-
在子组件的配置项中可以使用一个props配置项来接收这个数据,接收时,props的取值可以是一个数组
Vue.component('Son',{ template: '#son', props: ['money'] })
-
在子组件模板中,接收到的属性可以像全局变量一样直接使用
<p> 父亲给了我 {{ money }} 钱 </p>
-
-
props接收的money 和 子组件上绑定的自定义属性money是不是同一个?
是同一个
个人习惯: 一般都是 自定义属性会和数据写成一致 -
自定义属性的书写
money ----> money
mask-flag ----> maskFlag -
为什么data要定义为一个函数?
- 组件是一个独立的个体,那么它应该拥有自己的数据,这个数据应该是一个独立的数据
- 也就是说这个数据应该有独立的作用域,也就是一个独立的适用范围,这个范围就是这个组件内
- js最大特征是:函数式编程,而函数恰好提供了独立作用域
-
为什么data要有返回值?返回值还是一个对象?
- 因为Vue是通过observer来观察data选项的,所以必须要有返回值
- 因为Vue要通过es5的Object.defineProperty属性对 对象进行getter和setter设置
-
app实例的手动挂载
new Vue({
}).$mount('#app')
2.2子父组件通信
案例:
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> 这里father组件 </h3>
<p> 儿子给了我 {{ money }} </p>
<Son @give = "getHongbao"/>
</div>
</template>
<template id="son">
<div>
<button @click = "giveFather"> give </button>
<h3> 这里是son组件 </h3>
</div>
</template>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 0
}
},
methods: {
getHongbao ( val ) {
console.log( 1 )
this.money = val
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
hongbao: 500
}
},
methods: {
giveFather () {
//如何进行父组件给子组件的自定义事件触发
this.$emit('give',this.hongbao)
}
}
})
new Vue({
el: '#app'
})
/*
自定义事件
1. 自定义的 通过 $on 定义 $emit触发
2. 通过绑定在组件身上定义,通过 $emit触发
子父通信流程
1. 在父组件的模板中,通过事件绑定的形式,绑定一个自定义事件在子组件身上
<Son @aa = "fn"/> //这边要注意: fn是要在父组件配置项methods中定义
2. 在子组件的配置项methods中写一个事件处理程序,在事件处理程序中触发父组件绑定的自定义事件
Vue.component('Son',{
template: '#son',
data () {
return {
hongbao: 500
}
},
methods: {
giveFather () {
//如何进行父组件给子组件的自定义事件触发
this.$emit('give',this.hongbao)
}
}
})
3. 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上
<template id="son">
<div>
<button @click = "giveFather"> give </button>
<h3> 这里是son组件 </h3>
</div>
</template>
*/
2.3自定义事件
- 自定义的 通过 $on 定义 $emit触发
var vm = new Vue({ el: '#app' }) // 自定义事件的定义( 发布 ) // vm.$on(自定义事件的名称,自定义事件的事件处理程序) vm.$on( 'aa', function () { console.log( 'aa' ) }) //自定义事件的触发 ( 订阅 ) // vm.$emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3) vm.$emit( 'aa' )
- 通过绑定在组件身上定义,通过 $emit触发
<Son @aa = "fn"/>
使用: 子父通信
2.4 组件的根元素必须有且仅有一个
2.5 非常规通信
- 案例:
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3>这里是father组件</h3>
<p> 这里是父组件的n; {{ n }} </p>
<Son :add = "add"></Son>
</div>
</template>
<template id="son">
<div>
<h3>这里是son组件</h3>
<button @click = "add( money )"> give </button>
</div>
</template>
</body>
<script>
/*
业务: 我要进行子父组件通信
理解: 使用自定义事件实现
实现:
父组件将一个方法通过属性绑定的形式给了子组件,子组件先是通过props接收这个方法,再执行这个方法
这个方法不推荐大家使用
why?
因为我们之前讲过,MVVM框架是单向数据流,但是上面的方法违背了单项数据流
*/
Vue.component('Father',{
template: '#father',
data () {
return {
n: 0
}
},
methods: {
add ( val ) {
this.n = val
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
money: 1000
}
},
props: ['add']
})
new Vue({
el: '#app'
})
</script>
- 案例:
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3>这里是father组件</h3>
<p> father: 小金库: {{ xiaojinku.money }} </p>
<Son :xiaojinku = "xiaojinku"></Son>
</div>
</template>
<template id="son">
<div>
<h3>这里是son组件</h3>
<button> give </button>
<input type="text" v-model = "xiaojinku.money">
<p> son 小金库: {{ xiaojinku.money }} </p>
</div>
</template>
</body>
<script>
/*
父组件传递一个 对象类型 给 子组件
子组件通过 props 接收
就会发现: 子组件修改这个数据的时候,父组件的数据也随之改变了 ?
why?
因为父组件给子组件的是对象的引用地址
这种方法我们不推荐使用 , 违背了单向数据流
*/
Vue.component('Father',{
template: '#father',
data () {
return {
xiaojinku: {
money: 1000
}
}
}
})
Vue.component('Son',{
template: '#son',
props: ['xiaojinku']
})
new Vue({
el: '#app'
})
</script>
3.动态组件
-
什么是动态组件?
可以改变的组件 -
使用
通过 Vue 提供了一个 component + is 属性 -
动态组件指的就是 component这个组件
-
案例
<div id="app"> <button @click = "change"> 切换 </button> <keep-alive include=""> <component :is = "type"></component> </keep-alive> </div>
Vue.component('Aa',{ template: '<div> Aa </div>' }) Vue.component('Bb',{ template: '<div> Bb </div>' }) new Vue({ data: { type: 'Aa' }, methods: { change () { this.type = (this.type === 'Aa'?'Bb':'Aa') } } }).$mount('#app')
-
Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存,这样当我们切换组件时,就可以大大提高使用效率
-
keep-alive也可以以属性的形式呈现,但是我们如果搭配component的话,建议使用组件的形式