在 vue 项目中,对于公共组件的调用一般是 import 引入公共组件,然后在 components 中注册组件,在页面中以标签的方式运用。
import Msg from ‘./msg‘ export default { ...... components: { Msg }, ...... }
如果是用 js 调用呢?
export default { ......, methods: { show() { this.$message({ message: ‘xxxxxx‘, type: ‘success‘ }) } }, ...... }
实现:
1、先写好一个组件:
// msg.vue
<template> <div class="msg" v-if="isShow">msg component</div> </template> <script> export default { name: ‘msg‘, data() { return { isShow: false } }, mounted() { this.fn1(2) }, methods: { show() { this.isShow = true console.log(‘show‘) }, hide() { this.isShow = false console.log(‘hide‘) } } } </script>
2、新建一个 js 文件:
// index.js
import Vue from ‘vue‘ import Msg from ‘./msg‘ const MsgConstructor = Vue.extend(Msg) const options = { data() { return { a: 1111111 } }, mounted() { this.fn1(1) }, methods: { fn1(val) { this.a = 3333 console.log(‘fn1‘, val) } }, watch: { a(val) { console.log(‘watch‘, val) } } } // options 内部同组件内部生命周期一样,但组件内部优先执行 const instance = new MsgConstructor(options) instance.$mount() document.body.appendChild(instance.$el) export default function install() { Vue.prototype.$msg = instance }
3、main.js 内引入:
// main.js
import Vue from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘ // msg公共组件 import msg from ‘@/components‘ Vue.use(msg) Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount(‘#app‘)
4、页面内用法:
<!-- 页面内 --> <template> <div class="hello"> <button @click="$msg.show()">show</button> <button @click="$msg.hide()">hide</button> </div> </template>
上面就完成了用纯 js 来控制公共组件实现的步骤。