本帖最后由 逆风TO 于 2020-4-8 11:23 编辑
监听组件生命周期通常我们监听组件生命周期会使用 $emit ，父组件接收事件来进行通知 子组件 [JavaScript] 纯文本查看 复制代码 export default {
mounted() {
this.$emit('listenMounted')
}
}
父组件 [JavaScript] 纯文本查看 复制代码 <template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>
其实还有一种简洁的方法，使用 @hook 即可监听组件生命周期，组件内无需做任何改变。同样的， created 、 updated 等也可以使用此方法。 [JavaScript] 纯文本查看 复制代码 <template>
<List @hook:mounted="listenMounted" />
</template>
比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号，除此之外没有任何用处。 [JavaScript] 纯文本查看 复制代码 export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。 我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题： [JavaScript] 纯文本查看 复制代码 export default {
mounted() {
this.creatInterval('hello')
this.creatInterval('world')
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
this.$once('hook:beforeDestroy', function() {
clearInterval(timer)
})
}
}
使用这个方法后，即使我们同时创建多个计时器，也不影响效果。因为它们会在页面销毁后程序化的自主清除。 手动挂载组件在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像 elementUI 的 this.$message 。而不是在模板中通过状态切换，这种实现真的很糟糕。 先来个最简单的例子： [JavaScript] 纯文本查看 复制代码 import Vue from 'vue'
import Message from './Message.vue'
// 构造子类
let MessageConstructor = Vue.extend(Message)
// 实例化组件
let messageInstance = new MessageConstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)
下面实现一个简易的 message 弹窗组件 Message/index.vue [JavaScript] 纯文本查看 复制代码 <template>
<div class="wrap">
<div class="message" :class="item.type" v-for="item in notices" :key="item._name">
<div class="content">{{item.content}}</div>
</div>
</div>
</template>
[JavaScript] 纯文本查看 复制代码 // 默认选项
const DefaultOptions = {
duration: 1500,
type: 'info',
content: '这是一条提示信息！',
}
let mid = 0
export default {
data() {
return {
notices: []
}
},
methods: {
add(notice = {}) {
// name标识 用于移除弹窗
let _name = this.getName()
// 合并选项
notice = Object.assign({
_name
}, DefaultOptions, notice)
this.notices.push(notice)
setTimeout(() => {
this.removeNotice(_name)
}, notice.duration)
},
getName() {
return 'msg_' + (mid++)
},
removeNotice(_name) {
let index = this.notices.findIndex(item => item._name === _name)
this.notices.splice(index, 1)
}
}
}
[CSS] 纯文本查看 复制代码 .wrap {
position: fixed;
top: 50px;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
}
.message {
--borderWidth: 3px;
min-width: 240px;
max-width: 500px;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 0 0 8px #ddd;
overflow: hidden;
}
.content {
padding: 8px;
line-height: 1.3;
}
.message.info {
border-left: var(--borderWidth) solid #909399;
background: #F4F4F5;
}
.message.success {
border-left: var(--borderWidth) solid #67C23A;
background: #F0F9EB;
}
.message.error {
border-left: var(--borderWidth) solid #F56C6C;
background: #FEF0F0;
}
.message.warning {
border-left: var(--borderWidth) solid #E6A23C;
background: #FDF6EC;
}
Message/index.js [JavaScript] 纯文本查看 复制代码 import Vue from 'vue'
import Index from './index.vue'
let messageInstance = null
let MessageConstructor = Vue.extend(Index)
let init = () => {
messageInstance = new MessageConstructor()
messageInstance.$mount()
document.body.appendChild(messageInstance.$el)
}
let caller = (options) => {
if (!messageInstance) {
init(options)
}
messageInstance.add(options)
}
export default {
// 返回 install 函数 用于 Vue.use 注册
install(vue) {
vue.prototype.$message = caller
}
}
main.js [JavaScript] 纯文本查看 复制代码 import Message from '@/components/Message/index.js'
Vue.use(Message)
使用 [JavaScript] 纯文本查看 复制代码 this.$messagae({
type: 'success',
content: '成功信息提示',
duration: 3000
})
| 
收藏
淘帖
踩
