本文介绍了Vue中组件通信的重要性以及各种通信方式，包括props、自定义事件、ref链、事件总线等。同时，详细讲解了动态组件的使用、keep-alive的缓存效果，以及slot插槽的概念、具名插槽的应用，强调了在Vue 2.6及以上版本中，v-slot指令对具名插槽和作用域插槽的统一作用。
组件通信
为什么要进行组件通信？
组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系
，这个联系我们就称之为通信
组件通信的方式有以下几种
父子组件通信
使用props来实现
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
</div>
</template>
<template id="son">
<div>
<h3> 这里是son组件 </h3>
<p> 父亲给了我 {{ aa }} 钱 </p>
<p> {{ maskFlag }} </p>
</div>
</template>
</body>
------------------------------------javascript-------------------------------------------
<script>
Vue.component('Father',{
template: '#father',
data () { // 为什么要将data定义为函数？
return {
money: 2000,
maskFlag: 10000000000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['aa','maskFlag']
})
new Vue({
}).$mount('#app')
</script>
props
1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
<Son :money = "money"/>
2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
e.component('Son',{
template: '#son',
props: ['money']
})
3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
<p> 父亲给了我 {{ money }} 钱 </p>
props接收的money和子组件上绑定的自定义属性money不是同一个
自定义属性的书写
money ----> money(小写原样书写)
mask-flag ----> maskFlag(小驼峰等含有大写字母的用-连接)
为什么data要定义为一个函数？
1. 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
2. 也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
3. js的最大特征是：函数式编程 ， 而函数恰好提供了独立作用域
为什么data要有返回值？返回值还是一个对象？
1. 因为Vue是通过observer来观察data选项的，所有必须要有返回值
2. 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置
子父组件通信
自定义事件
<body>
<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>
</body>
------------------------------------javascript-------------------------------------------
<script>
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'
})
</script>
自定义事件
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>
非父子组件通信
ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<!-- 组件中根元素必须唯一 -->
<div>
<h3> 这里是father </h3>
<button @click = "look"> 点击查看father的this </button>
<p> father的 n: {{ n }} </p>
<hr>
<Son ref = "son"></Son>
<Girl ref = "girl" :n = "n"></Girl>
</div>
</template>
<template id="son">
<div>
<h3> 这里是 son 1 </h3>
</div>
</template>
<template id="girl">
<div>
<h3> 这里是girl </h3>
<button @click = "out"> 输出girl的this </button>
</div>
</template>
</body>
------------------------------------javascript-------------------------------------------
<script>
/*
通过ref绑定组件后，我们发现在他们的共同父组件的 $refs里面可以找到子组件
*/
Vue.component('Father',{
template: '#father',
data () {
return {
n: 0
}
},
methods: {
look () {
this.n = this.$refs.son.money
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
money: 1000
}
}
})
Vue.component('Girl',{
template: '#girl',
data () {
return {
num: 0
}
},
methods: {
out () {
console.log( this )
console.log( this.$attrs )
}
}
})
new Vue({
el: '#app'
})
</script>
bus事件总线
<body>
<div id="app">
<Bro></Bro>
<Sma></Sma>
</div>
<template id="big">
<div>
<h3> 这里是哥哥组件 </h3>
<button @click = "hick"> 揍 </button>
</div>
</template>
<template id="small">
<div>
<h3> 这里是弟弟组件 </h3>
<p v-show = "flag"> 呜呜呜呜呜呜呜呜呜uwuwuwuwu </p>
</div>
</template>
</body>
------------------------------------javascript-------------------------------------------
<script>
var bus = new Vue() // bus原型上是不是有 $on $emit
Vue.component('Bro',{
template: '#big',
methods: {
hick () {
bus.$emit('aa')
}
}
})
Vue.component('Sma',{
template: '#small',
data () {
return {
flag: false
}
},
mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
// mounted这个钩子函数的触发条件是组件创建时会自动触发
// 事件的声明
var _this = this
bus.$on( 'aa',function () {
_this.flag = true
console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
})
}
})
new Vue({
el: '#app'
});
</script>
bus事件总线，我们是通过 $on来定义事件， 通过 $emit来触发事件
案例： 哥哥揍弟弟，弟弟哭
流程：
1. 在其中一个组件的 挂载钩子函数 上 做事件的声明
Vue.component('Sma',{
template: '#small',
data () {
return {
flag: false
}
},
mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
// mounted这个钩子函数的触发条件是组件创建时会自动触发
// 事件的声明
var _this = this
bus.$on( 'aa',function () {
_this.flag = true
console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
})
}
})
2. 在另一个组件中 通过 bus.$emit('aa')来触发这个自定义事件
非常规手段(不推荐)
app实例的手动挂载
<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接收这个方法，在执行这个方法
这个方法不推荐大家使用
因为我们之前讲过，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>
自定义事件
-
自定义的 通过 $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”/>使用： 子父通信
案例
<body> <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> </body> <script> /* 自定义事件 1. 自定义的 通过 $on 定义 $emit触发 2. 通过绑定在组件身上定义，通过 $emit触发 <Son @aa = "fn"/> */ 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) } } }) var vm = new Vue({ el: '#app' }) // 自定义事件的定义（ 发布 ） // vm.$on(自定义事件的名称，自定义事件的事件处理程序) vm.$on( 'aa', function () { console.log( 'aa' ) }) //自定义事件的触发 （ 订阅 ） // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3) vm.$emit( 'aa' ) </script>
组件的根元素必须有且仅有一个
动态组件
-
什么是动态组件？
可以改变的组件 -
使用
通过 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的话，建议使用组件的形式
slot 插槽
-
作用/概念: 预先将将来要使用的内容进行保留
-
具名插槽： 给slot起个名字
案例1
<body> <div id="app"> <Hello> <div> 这里是XXX </div> </Hello> </div> <template id="hello"> <div> <slot></slot> <h3>这里是hello</h3> </div> </template> </body> <script> Vue.component('Hello',{ template: '#hello' }) new Vue({ el: '#app' }); </script>案例2:
<body> <div id="app"> <Hello> <header slot = 'header'> 这里是头部 </header> <footer slot = 'footer'> 这里是底部 </footer> </Hello> </div> <template id="hello"> <div> <slot name = "header"></slot> <h3>这里是hello</h3> <slot name = "footer"></slot> </div> </template> </body> <script> Vue.component('Hello',{ template: '#hello' }) new Vue({ el: '#app' }) </script>
-
以上两种形式在 vue2.6以上被废弃
-
vue2.6用v-slot指定代替
<div id="app"> <Hello> <template v-slot:header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </Hello> </div> <template id ='hello'> <div class="container"> <header> <!-- 我们希望把页头放这里 --> <slot name = "header"></slot> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> <slot name = 'footer'></slot> </footer> </div> </template> </body> <script> Vue.component('Hello',{ template: '#hello' }) new Vue({ el: '#app', data: { msg: '<h3> hello 1903</h3>' } }) </script> -
为什么要 用 v-slot指令来代替呢？
- 经具名插槽和作用域插槽进行统一
- 要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一： 指令的概念
扫一扫
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
