时间:2021-05-26
本文实例讲述了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)希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
创建组件的两种方法小结1.全局注册2.局部注册varchild=Vue.extend({})varparent=Vue.extend({})Vue.extend
1.使用Vue.extend创建全局的Vue组件//1.1使用vue.extend创建组件varcom1=Vue.extend({//通过template属性指
在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象。其中,在extend中的data和vue实例化对象中的data写
Vue.extend构造器的详解1.简单介绍Vue.extend(options)参数:对象用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对
Vue动态创建组件实例并挂载到body方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops