VUE中写公共组件类似于Toast点击触发的

最新推荐文章于 2022-07-11 12:40:44 发布

原创最新推荐文章于 2022-07-11 12:40:44 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

vue+webpack 同时被 2 个专栏收录

11 篇文章

订阅专栏

html+js+css

6 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建一个全局的Toast组件。首先在components下创建toast目录，包含toast.vue和index.js。接着在js中引入Vue并定义构造器，通过Vue.extend()实例化并挂载到页面上。在main.js中引入并调用，解决'模板或render函数未定义'的错误，确保Vue页面代码整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步在components里面建立toast文件夹里面包含两个文件一个toast.vue 一个index.js

第二部在js中引入vue 在引入当前创建的toast.vue文件在定义一个constructoe = Vue.extend() 实例构造器

import Vue from 'vue'
import Main from './toast'
let ToastConstructor = Vue.extend(Main)

定义常量 并传入参数 在导出常量

const Toast =  (options) => {
  //这里是内容
    ....
}

export default Toast

重点来了

先要new一下Vue.extend出来的构造器让其生成实例

let instance = new ToastConstructor({
    data: options// 重置该实例的data数据 也就是toastVue里面的data数值
  })

挂载

let toastVm = instance.$mount()

添加到页面上

document.body.appendChild(toastVm.$el)

toast.js的完整代码

import Vue from 'vue'
import Main from './toast'
let ToastConstructor = Vue.extend(Main)

const Toast =  (options) => {
  options = options || {}
  if (typeof options === 'string') {
    options = {
      message: options
    }
  }
  let instance = new ToastConstructor({
    data: options
  })
  let toastVm = instance.$mount()
  document.body.appendChild(toastVm.$el)
}

export default Toast

最后调用在main.js里面

//Vue.use(Toast)//use是直接执行
Vue.prototype.$Toast = Toast

在页面中使用直接调用即可

this.$Toast('我是toast')

其中有一个小插曲就是一直在报错’template or render function not defined.‘ 开始的时候一直在查找js 也定位了就是mount的时候报的错。最后发现是在vue页面不小心加了一行乱七八糟的代码，以此为纪，让自己长记性不要老想当然?