vue 用 js 调用公共组件

在 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 来控制公共组件实现的步骤。

 

vue 用 js 调用公共组件

上一篇:带有渐变颜色和额外图像的自定义按钮控件(VB.NET)


下一篇:js中对象常见操作