1、Vue.extend()官网的解释

使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

2、个人理解认识

 var myextend=Vue.extend({
 	template:'<h1>......</h1>',
 	data(){}
  })

通过他构建出来的类似与一个模板对象,也可以说,他返回的是一个更像是一个构造函数,在需要使用的地方借助于·Vue.component() 生成一个组件,然后使用。就像是我们在JS中使用的构造函数,先定义好,然后在需要使用的地方new一下。
ps: 实例化extend构造器时,传入属性需要使用propsData,而不是props

<div id="todoItem"></div>
<script>
   var todoItem = Vue.extend({
  data() {//这里必须使用方法
        return {
            todoData: [
              { id: 0, text: '张三' },
              { id: 1, text: '李四' },
              { id: 2, text: '王五' }
            ]
        }
  },
  props:['todoData'],
  template: `
        <ul>
            <li v-for='(item, i) in todoData' :key="i">
                {{ item.text }}
            </li>
        </ul>
  `
});
 new todoItem({
  propsData: {//这里必须使用propsData
      todoData: [
          { id: 0, text: '花花' },
           { id: 1, text: '花花' },
           { id: 2, text: '花花' }
 
      ]
  }
}).$mount('#todoItem')
</script>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐