vue.extend()学习 - Go语言中文社区

vue.extend()学习


vue.extend()方法其实是vue的一个构造器,继承自vue
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

<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>

接下来,我们来用vue.extend()来实现以下

首先我们新建一个 hello.vue
<!--hello.vue-->
<template>
  <div>{{text}}</div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      text: ''
    }
  }
}
</script>

接下来我们在同级新建一个 hello.js

// hello.js
import Vue from 'vue';
import HelloTemplate from './hello.vue';

// 使用extend方法创建vue的子类
const HelloConstructor = Vue.extend(HelloTemplate);

// 使用这个方法调用hello组件
function Hello(options) {
  options = options || {};
  if (typeof options === 'string') {
    options = {
      text: options
    }
  }
  
  // 实例化子组件,然后获取到DOM结构并挂载到body上
  const helloInstence = new HelloConstructor({data: options});
  helloInstence.vm = helloInstence.$mount();
  console.log(helloInstence.vm)
  document.body.appendChild(helloInstence.vm.$el);
}
export default Hello;

最后在main.js引入
在这里插入图片描述
最后的运行效果如下

在这里插入图片描述

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_36772866/article/details/99890758
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-08-27 18:27:54
  • 阅读 ( 2634 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢