zoukankan      html  css  js  c++  java
  • Vue.extend挂载到实例上

    根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

    官网的用法是:
    <div id="mount-point"></div>

    // 创建构造器
    var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
    return {
    firstName: 'Walter',
    lastName: 'White',
    alias: 'Heisenberg'
    }
    }
    })
    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')

    最终结果如下:
    <p>Walter White aka Heisenberg</p>

    感觉这样写不太美观

    于是改为下面这样写:
    在文件夹./src/component/expend,新建两个文件:main.js和main.vue
    main.vue就是你的组件,爱怎么写怎么写
    main.js是把组件挂载到实例上,代码如下:

    import Vue from 'Vue'
    import Main from './main.vue'
    let Builder = Vue.extend(Main)
    export default {
    install (vue) {
    vue.prototype.$YOURNAME = this.getComponent
    },
    getComponent (param) {
    let instance = new Builder({
    propsData: { param }
    })
    instance.vm = instance.$mount()
    document.body.appendChild(instance.vm.$el)
    return instance
    }
    }

    在入口文件main.js,添加代码:

    import Vue from 'Vue'
    import myComponent from './src/component/expend/main.js'
    Vue.use(myComponent)

    然后在页面中就可以这样使用了:

    this.$YOURNAME(param)
  • 相关阅读:
    jeecg多页签的选择切换
    设计模式:工厂三姐妹一网打尽
    设计模式:工厂三姐妹一网打尽
    设计模式:工厂三姐妹一网打尽
    设计模式:工厂三姐妹一网打尽
    三、原子操作
    三、原子操作
    三、原子操作
    三、原子操作
    WebClient HttpWebRequest从网页中获取请求数据
  • 原文地址:https://www.cnblogs.com/zmdComeOn/p/12894393.html
Copyright © 2011-2022 走看看