vue渐进式框架-事件总线及插槽等
文章目录
- 一、事件总线
- 二、混入Mixin
- 三、动态组件
- 四、异步组件
- 五、Ref
- 六、过渡动画
- 七、插槽
提示：以下是本篇文章正文内容，下面案例可供参考
一、事件总线
事件总线，是为了解决兄弟组件之间的通信问题。
var bus = new Vue() // 事件总线
bus.$on() 用于接收信息
bus.$emit() 用于发送信息
// 订阅发布模式
二、混入Mixin
作用是：实现组件中选项的复用。
<body>
<div id="app">
<qf-child>qf-child>
<qf-test>qf-test>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
// 全局混入
Vue.mixin({
data: function() {
return {
msg: ''
}
},
mounted() {
console.log('mounted')
},
methods: {
click() {
console.log('clicked')
}
}
})
// 局部混入，使用 mixins 这个选项
var obj = {
created() {
console.log('created')
}
}
Vue.component('qf-test', {
template:`
我是测试组件
`,
// 局部混入
mixins:[obj]
})
var app = new Vue({
el: '#app',
components: {
'qf-child': {
template:`
我是子组件
`,
mixins:[obj]
}
}
})
script>
body>
三、动态组件
作用：凡是被keep-alive包裹的组件，可保留组件状态，而不是销毁和重置。
<keep-alive>
<component :is='tab'>component>
keep-alive>
四、异步组件
需要特定的触发条件，才被编译到Vue系统中。
<body>
<div id="app">
<qf-child>qf-child>
<qf-async-child>qf-async-child>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
Vue.component('qf-child', {
template: `
我是一个组件
`
})
// 异步组件
Vue.component('qf-async-child', function(resolve, reject){
setTimeout(function(){
resolve({
template: `
我是一个异步组件
`
})
}, 5000)
})
var app = new Vue({
el: '#app'
})
script>
body>
五、Ref
作用：为我们提供了一种便捷的DOM操作方式
原则：尽可能地减少使用ref，如果使用太多会影响程序性能
使用：给HTML标签或自定义组件添加ref属性，然后在JS脚本中使用this.$refs可以访问当前组件中所有ref节点
<body>
<div id="app">
<qf-child ref='child'>qf-child>
<button @click='change'>ref操作button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
// ref
// 作用：为我们提供了一种便捷的DOM操作方式
// 原则：尽可能地减少使用ref，如果使用太多会影响程序性能
// 使用：给HTML标签或自定义组件添加ref属性，然后在JS脚本中使用this.$refs可以访问当前组件中所有ref节点
Vue.component('qf-child', {
template: `
我是子组件
`,
data: function() {
return {
msg: 'child msg'
}
},
methods: {
getMsg() {
console.log(this.msg)
},
initMsg() {
this.msg = 'hello'
}
}
})
var app = new Vue({
el: '#app',
methods: {
change() {
// 获取子组件的data属性
var msg = this.$refs.child.msg
console.log('super', msg)
// 调用、触发子组件的methods方法
this.$refs.child.getMsg()
this.$refs.child.initMsg()
}
}
})
script>
body>
六、过渡动画
知识点：记住四个时刻(enter/enter-to/leave/leave-to)和两个阶段(enter-active/leave-active)
引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
css:
/* 显示动画 */
.xxx-enter {
opacity: 0;
color: red;
font-size: 12px;
}
.xxx-enter-active {
color: blue;
transition: all 5s ease;
font-size: 12px;
}
.xxx-enter-to {
opacity: 1;
color: green;
font-size: 36px;
}
/* 隐藏动画 */
.xxx-leave {
opacity: 1;
color: green;
font-size: 36px;
}
.xxx-leave-active {
color: blue;
transition: all 5s ease;
font-size: 12px;
}
.xxx-leave-to {
opacity: 0;
color: red;
font-size: 12px;
}
html:
<div id='app'>
<button @click='toggle'>显示/隐藏button>
<transition name='xxx'>
<h1 v-show='show'>测试过渡动画的语法h1>
transition>
<hr>
<button @click='toggle2'>显示/隐藏button>
<transition
enter-active-class='animate__animated animate__bounce'
leave-active-class='animate__animated animate__flash'
>
<h1 v-show='show2'>2006h1>
transition>
<hr>
<button @click='toggle3'>显示/隐藏button>
<transition
enter-active-class='animate__animated animate__bounce'
leave-active-class='animate__animated animate__flash'
mode='out-in'
>
<h1 v-if='show3' key='1'>2006h1>
<h1 v-else key='2'>2007h1>
transition>
div>
js:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
show2: true,
show3: true
},
methods: {
toggle() {
this.show = !this.show
},
toggle2() {
this.show2 = !this.show2
},
toggle3() {
this.show3 = !this.show3
}
}
})
</script>
七、插槽
作用：在自定义封装组件时特别有用，占一个空位。
#是v-slot的简写
css:
html,body {
padding: 0;
margin: 0;
background: rgba(29, 31, 33, 1);
}
.modal {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 25px;
color: black;
background: white;
border-radius: 5px;
}
.modal-header {
line-height: 30px;
height: 30px;
overflow: hidden;
}
.modal-header span:last-child {
float: right;
cursor: pointer;
}
.modal-header span:first-child {
float: left;
}
.modal-content {
padding: 15px 0;
}
.modal-footer>div:first-child span {
float: right;
margin-left: 10px;
}
.modal-footer span {
display: inline-block;
padding: 0 15px;
line-height: 28px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #aaa;
}
.modal-footer span.confirm {
color: white;
background-color: blue;
border-color: blue;
}
.modal-footer span.delete {
color: white;
background-color: red;
border-color: red;
}
html:
<div id="app">
<qf-modal>
<template #header>
<span>温馨提示span>
template>
<template #content>
<div>你确定要删除吗？div>
template>
<template #footer>
<span>取消span>
<span class='delete'>删除span>
template>
qf-modal>
<qf-modal>
<template #header>
<span>提示span>
template>
<template #content>
<div>
<input type="text">
div>
template>
<template #footer>
<span>取消span>
<span class="confirm">确定span>
template>
qf-modal>
div>
js:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('qf-modal', {
template:`