在 Vue 里面,如果你想在页面里弹出一个东西,通常的办法是:
事先把要弹出的东西写在页面里,用 visible: false 把它隐藏起来
控制 visible 使其显示或再次隐藏
另外一种就是上面代码所示那样
用户点击按钮的时候创建一个 Vue 实例
用户点击另一个按钮的时候删除这个 Vue 实例
Element UI 的 $message 就是这样实现的,这种方法尤其适合通知类的场景,代码如下。
var MyComponent = Vue.extend({
props: ['prop1'],
template: `
<div>
<p>data: {{message}}</p>
<p>props: {{prop1}}</p>
<p><button @click="$emit('hi')">emit</button></p>
</div>
`,
data() {
return {
message: 'my component'
}
}
})
var app = new Vue({
el: '#app',
mounted(){
var c = this.c = new MyComponent({
propsData: {
prop1: 'prop1'
}
}).$mount()
this.$refs.here.appendChild(c.$el)
c.$on('hi', ()=>{
console.log('hi from myComponent')
})
},
methods:{
remove(){
this.c.$el.remove()
this.c.$destroy()
this.c = null
}
}
})