Vue与VueComponent关系

本内容来自尚硅谷天禹老师:

1.一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

Vue与VueComponent关系_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.prototype.x = 99 // 定义在Vue原型上

		//定义school组件 school就是一个VueCompnnets
		const school = Vue.extend({
			name:'school',
			template:`
				

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showX(){ //获取到的是vue原型上的属性、方法。 console.log(this.x)// 99 } }, }) </script> </html>

你可能感兴趣的:(构造函数,vue,前端,vue.js,javascript,前端)