Vue.extend()构造器

最新推荐文章于 2024-05-05 08:06:44 发布

西风XF

最新推荐文章于 2024-05-05 08:06:44 发布

阅读量5.1k

点赞数

分类专栏： Vue.js 文章标签： vue.js Vue.extend

本文链接：https://blog.csdn.net/qq_36242361/article/details/74391041

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

西风XF

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Vue.extend()构造器

Vue.js官网解释：Vue.extend( options )参数：{Object} options用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项是特例，需要注意 - 在Vue.extend()中它必须是函数。另：在网上看到的三个Vue.js的CND资源，推荐给需要的同学。BootCDN(国内) : htt...
复制链接

扫一扫