Vue.extend()构造器

Vue.js官网解释：

Vue.extend( options )

参数：

{Object} options

用法：

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

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

 

另：在网上看到的三个Vue.js的CND资源，推荐给需要的同学。

BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js；
unpkg(国外) : https://unpkg.com/vue/dist/vue.js；会保持和 npm 发布的最新的版本一致;
cdnjs(国外) : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js；

 

贴出写的Vue.extend()的demo,直接copy运行就OK了。

 

在项目中，用vue-cli脚手架搭建的项目：

 

template模板是一个单独的a.vue文件，成为a组件，然后用exprot default{}暴露接口，若b.vue需要引入a组件,在b.vue中用import引入a组件，再在b.vue文件中注册a.vue组件。 

vue-cli的脚手架搭建网上有很多教程；

 

 

 

 

 

-------------------------------------------------分割线--------------------------------------------------------------------------

 

 

在官网看到的一个github的链接，很有意思摘取了一个小的demo:

https://github.com/vuejs/vue/blob/7b069453edbf7fd03363a63d040396d274a79757/test/unit/features/options/extends.spec.js

 

const A = {
  	data () {
    	return { a: 1 }
  	}
}
const B = {
  	extends: A,
  	data () {
    	return { b: 2 }
  	}
}
const vm = new Vue({
	el:"#app",
  	extends: B,
  	data: {
    	c: 3
  	}
})
console.log(vm.a);
console.log(vm.b);
console.log(vm.c);