学习day55

消息订阅与发布

1. 消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入：import pubsub from 'pubsub-js'

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

      export default {methods(){demo(data){...}}...mounted() {this.pid = pubsub.subscribe('xxx',this.demo)}
      }

   4. 提供数据：pubsub.publish('xxx',data)

   5. 最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅

School.vue

<template><div class="school"><h2>学校名称:{{name}}</h2><h2>学校地址:{{adress}}</h2></div>
</template><script>
import pubsub from 'pubsub-js'export default {name:'School',data(){return{name:'尚硅谷',adress:'北京昌平'  }},methods:{demo(msgName,data){console.log('有人发布了hello消息，hello消息的回调执行了',data)}},mounted(){this.pubId=pubsub.subscribe('hello',this.demo// console.log('有人发布了hello消息，hello消息的回调执行了',b))},beforeDestroy(){pubsub.unsubscribe(this.pubId)}}
</script>
<style scoped>
.school{background-color: skyblue;
}
</style>

Student.vue

<template><div class="student"><h2>学生姓名:{{name}}</h2><h2>学生性别:{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>
import pubsub from 'pubsub-js'export default {name:'Student',data(){return{name:'张三',sex:'男', }},methods:{sendStudentName(){pubsub.publish('hello',666)}},}
</script>
<style scoped>.student{background-color: pink;}
</style>

$nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

myItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/><span v-show="!todo.isEdit">{{todo.title}}</span><input v-show="todo.isEdit" type="text" :value="todo.list" @blur="handleBlur(todo,$event)" ref="inputTitle"></label><button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button><button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button></li>
</template><script>import pubsub from 'pubsub-js'export default {name:'MyItem',props:['todo'],methods:{handleCheck(id){this.$bus.$emit('checkTodo',id)},handleDelete(id,title){if(confirm("确定删除任务："+title+"吗？")){//this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}},//编辑handleEdit(todo){if(todo.hasOwnProperty('isEdit')){todo.isEdit=true}else{this.$set(todo,'isEdit',true)}this.$nextTick(function(){this.$refs.inputTitle.focus()})},//失去焦点回调（真正执行修改函数）handleBlur(todo,e){todo.isEdit=falsethis.$bus.$emit('updateTodo',todo.id,e.target.value)}}}
</script><style scoped>li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover {background-color: #eee;}li:hover button{display: block;}
</style>

过度与动画

1. 准备好样式：

   • 元素进入的样式：
     1. v-enter：进入的起点
     2. v-enter-active：进入过程中
     3. v-enter-to：进入的终点
   • 元素离开的样式：
     1. v-leave：离开的起点
     2. v-leave-active：离开过程中
     3. v-leave-to：离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性：

   <transition name="hello"><h1 v-show="isShow">你好啊！</h1>
   </transition>

3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

App.vue

<template><div><TestVue></TestVue><Test2Vue></Test2Vue><Test3Vue></Test3Vue></div>
</template><script>
import TestVue from './components/Test.vue'
import Test2Vue from './components/Test2.vue'
import Test3Vue from './components/Test3.vue'export default {name:'App',components: { TestVue,Test2Vue,Test3Vue },}
</script>

Test.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="hello"><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 1s;}.hello-leave-active{animation: atguigu 1s reverse;}@keyframes atguigu {from{transform:translateX(-100%);}to{transform: translateX(0px);}}</style>>

Test2.vue

<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>>

Test3.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-groupappearname="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>>