Vue基础系列（十八）vuecomponent - 重要的内置关系
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列（十八）vuecomponent - 重要的内置关系相关的知识，希望对你有一定的参考价值。
【Vue】基础系列（十八）vuecomponent - 一个重要的内置关系
🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年4月4日🌹
🆕最新更新时间：🎄2022年4月4日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
文章目录
一个重要的内置关系：
1.VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>一个重要的内置关系</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.prototype.x = 99
//定义school组件
const school = Vue.extend(
name:'school',
template:`
<div>
<h2>学校名称：name</h2>
<h2>学校地址：address</h2>
<button @click="showX">点我输出x</button>
</div>
`,
data()
return
name:'尚硅谷',
address:'北京'
,
methods:
showX()
console.log(this.x)
,
)
//创建一个vm
const vm = new Vue(
el:'#root',
data:
msg:'你好'
,
components:school
)
//定义一个构造函数
/* function Demo()
this.a = 1
this.b = 2
//创建一个Demo的实例对象
const d = new Demo()
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__) //隐式原型属性
console.log(Demo.prototype === d.__proto__)
//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99
console.log('@',d) */
</script>
</html>
关于VueComponent：
-
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
-
2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
-
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
-
4.关于this指向：
- (1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 - (2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
- (1).组件配置中：
-
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VueComponent</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<school></school>
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义school组件
const school = Vue.extend(
name:'school',
template:`
<div>
<h2>学校名称：name</h2>
<h2>学校地址：address</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data()
return
name:'尚硅谷',
address:'北京'
,
methods:
showName()
console.log('showName',this)
,
)
const test = Vue.extend(
template:`<span>atguigu</span>`
)
//定义hello组件
const hello = Vue.extend(
template:`
<div>
<h2>msg</h2>
<test></test>
</div>
`,
data()
return
msg:'你好啊！'
,
components:test
)
// console.log('@',school)
// console.log('#',hello)
//创建vm
const vm = new Vue(
el:'#root',
components:school,hello
)
</script>
</html>
以上是关于Vue基础系列（十八）vuecomponent - 重要的内置关系的主要内容，如果未能解决你的问题，请参考以下文章