上篇文章在这里
本周Vue的学习进度不大，重在掌握。
组件自定义事件
组件的自定义事件是一种组件间通信的方式，适用于：子组件===>父组件。
-
A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
-
绑定自定义事件的方式：
-
第一种方式 在父组件中：或者简写<Demo @at1=‘test’/>
-
第二种方式 在父组件中： 通过ref实现，灵活性更强。
<Demo ref="demo"/> //mounted mounted() { //回调函数要么配置在methods中。要么使用箭头函数，否则this指向会出问题 this.$refs.xxx.$on('at1',this.test) } -
如果只想让自定义事件触发一次，可以使用once修饰符或者$once方法
-
-
触发自定义事件：this.$emit(‘at1’,数据)
-
解绑自定义事件：this.$off(‘at1’)
-
组件上也可以绑定原生DOM事件，需要使用native修饰符
App.vue：
<template>
<div class="app">
<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<School :getSchoolName="getSchoolName"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
msg:'你好啊！',
studentName:''
}
},
methods: {
getSchoolName(name){
console.log('App收到了学校名：',name)
},
getStudentName(name,...params){
console.log('App收到了学生名：',name,params)
this.studentName = name
},
m1(){
console.log('demo事件被触发了！')
},
show(){
alert(123)
}
},
mounted() {
this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
},
}
</script>
School.vue:
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
<script>
export default {
name:'School',
props:['getSchoolName'],
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
methods: {
sendSchoolName(){
this.getSchoolName(this.name)
}
},
}
</script>
Student.vue:
<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>当前求和为：{{number}}</h2>
<button @click="add">点我number++</button>
<button @click="sendStudentlName">把学生名给App</button>
<button @click="unbind">解绑atguigu事件</button>
<button @click="death">销毁当前Student组件的实例(vc)</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
number:0
}
},
methods: {
add(){
console.log('add回调被调用了')
this.number++
},
sendStudentlName(){
//触发Student组件实例身上的atguigu事件
this.$emit('atguigu',this.name,666,888,900)
// this.$emit('demo')
// this.$emit('click')
},
unbind(){
this.$off('atguigu') //解绑一个自定义事件
// this.$off(['atguigu','demo']) //解绑多个自定义事件
// this.$off() //解绑所有的自定义事件
},
death(){
this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
}
},
}
</script>
相关文章：
Vue组件自定义事件详解
全局事件总线（GlobalEventBus）
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。
-
在main.js中安装全局事件总线
-
方法一：
const Demo = Vue.extend({}); const d = new Demo(); Vue.prototype.x = d; -
方法二（提倡）：
new Vue({ .... beforeCreate() { Vue.prototype.$bus = this //this就是当前应用的Vue } })
-
-
使用事件总线
-
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件中
methods() { demo(data) { ... } }, mounted() { this.$bus.$on('xxx',this.demo) } -
提供数据：this.$bus.$emit(‘xxx’,数据)
-
-
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
-
x需要满足所有组件都能看到（使用）以及它自身能够调用on,off,emit这三个方法
相关文章：
消息订阅与发布 pubsub
消息订阅与发布是一种组件间通信的方式，适用于任意组件间的通信。
使用方法：
-
调用pubsub.js库命令，安装pubsub：
npm i pusub-js -
在所使用的地方引入库：
import pubsub from 'pubsub-js'methods() { demo(data) { ... } }, methods() { this.pubId = pubsub.subscribe('xxx',this.demo)//订阅消息 }... methods: { sendName() { pubsub.publish('hello',666)//发布消息 } } -
pubsub.subscribe(‘xxx’,demo) 和pubsub.publish(‘xxx’,666) 接收两个参数，第一个是消息名，第二个参数是消息（需要的数据）
-
组件要被销毁的时候，应该取消订阅
beforeDestroy() { // this.$bus.$off('hello') pubsub.unsubscribe(this.pubId) },
相关文章：
$nextTick（视图渲染完，操作DOM）
- 语法：
this.$nextTick(回调函数) - 作用：在下一次DOM更新结束后执行其指定的回调
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在$nextTick所指定的回调函数中执行
动画与过渡
vue封装的过渡与动画
作用：在插入、更新或者移除DOM元素时，在合适的时候给元素添加样式类名。
元素进入的样式：
v-enter:起点
v-enter-active：过程中
v-enter-to：终点
元素离开的样式：
v-leave：起点
v-leave-active：过程中
v-leave-to：终点
-
使用<transtion>包裹需要过渡的元素，并配置name属性
-
若是多个元素需要过渡，则使用<transtion-group>，每个元素指定key值
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </div> </template> <script> export default { name:'Test', data() { return { isShow:true } }, } </script> <style scoped> h1{ background-color: orange; } .hello-enter-active{ animation: atguigu 0.5s linear; } .hello-leave-active{ animation: atguigu 0.5s linear reverse; } @keyframes atguigu { from{ transform: translateX(-100%); } to{ transform: translateX(0px); } } </style><template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">尚硅谷！</h1> </transition-group> </div> </template> <script> export default { name:'Test', data() { return { isShow:true } }, } </script> <style scoped> h1{ background-color: orange; } /* 进入的起点、离开的终点 */ .hello-enter,.hello-leave-to{ transform: translateX(-100%); } .hello-enter-active,.hello-leave-active{ transition: 0.5s linear; } /* 进入的终点、离开的起点 */ .hello-enter-to,.hello-leave{ transform: translateX(0); } </style>
第三方动画库
- 安装animate.css库：
npm install animate.css - 在目标组件文件引入样式库：
import 'animate.css' - 使用样式库：
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="!isShow" key="1">你好啊！</h1>
<h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name:'Test',
data() {
return {
isShow:true
}
},
}
</script>
<style scoped>
h1{
background-color: orange;
}
</style>
扫一扫
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
