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

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="mount">
			<animal></animal>
			<hello></hello>
		</div>
	</body>
	<script type="text/javascript">
		//Vue.extend()构造器,使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
		//data 选项是特例，需要注意在 Vue.extend()中它必须是函数
		
		var animal = Vue.extend({//构造animal组件
			template:'<h1>I am is one {{animal}}</h1>',
			data:function(){
				return {
					animal:'cat'
				}
			}
		});
		
		var hello = Vue.extend({//构造hello组件
			template:'<h1>Hello World!</h1>',
		});
		new Vue({
			el:"#mount",//挂载元素
			components:{//注册组件
				'animal':animal,
				'hello':hello
			}
		})
	</script>
</html>


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

 

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

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

 

 

<!--a.vue-->
<template>
	<h1>Hello World!</h1>
</template>
<script type="text/ecmascript-6">
	//暴露接口
	export default{};
</script>

 

<!--b.vue-->
<template>
	<aa></aa>
</template>
<script type="text/ecmascript-6">
	//a是a标签的关键字，所以需要用别名替代
	import a from "a.vue";
	export default{
		components:{
			"aa":a
		}
	};
</script>

 

 

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

 

 

在官网看到的一个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);

 

 

 

 

 

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue