详解Vue与VueComponent的关系
更新时间：2021年12月03日 15:21:28 作者：奶茶丶
这篇文章主要为大家介绍了Vue与VueComponent的关系，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
下面这个案例 复习我们之前学过的原型链的知识点
// 定义一个构造函数
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__); //true
//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99
console.log('@',d.__proto__.x);
根据下面这个组件来分析 VueComponent
<body>
<div id="root">
<school></school>
</div>
<script>
Vue.config.productionTip = false
//定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
}
})
//创建Vue
new Vue({
el:'#root',
components:{
school,
}
})
</script>
</body>
1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2、我们只需要写<school/>或<school</school>,vue解析时会帮我们创建school组件的实例对象；即Vue帮我们执行的：new VueComponent(options)
3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
4、关于this指向：
- 组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象 new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是 Vue实例对象
5、VueComponent的实例对象，以后简称vc ---- 组件实例对象
重点
- 一个重要的内置关系：
VueComponent.prototype._proto_===Vue.prototype - 为什么要有这个关系：让组件实例对象vc可以访问到Vue原型上的属性、方法
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了vue中的H5移动端项目 真机测试配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
vue2.0结合DataTable插件实现表格动态刷新的方法详解
这篇文章主要介绍了vue2.0结合DataTable插件实现表格动态刷新的方法,结合具体项目实例形式分析了vue2.0结合DataTable插件实现表格动态刷新过程中遇到的问题与相应的解决方法,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了在vue中使用screenfull 依赖，实现全屏组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue自定义指令directive的相关资料，下面通过实例给大家介绍,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了关于Vue3中的响应式原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue3引入uview-plus3.0移动组件库的流程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码
这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧2024-01-01
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论