您现在的位置是:首页 > Javascript
当前栏目
Vue中组件到底是什么
2023-04-18 14:14:14 时间
1.先说结论:
Vue中组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
2.我们使用组件时发生了什么?
比如定义了一个school,然后在页面上使用它
我们只需要写 < school/ > 或< school >< /school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
3.实际代码,我们定义一个school组件,然后在页面中打印出来。
<!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>
</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>`
})
console.log('@',school)
//创建vm
const vm = new Vue({
el:'#root',
components:{school,hello}
})
</script>
</html>
打印结果如下,是一个VueComponent构造函数:
我们也可以点进去看一下源码
我们使用组件时如何证明它执行了new VueComponent()操作?
我们直接在源码中加一句代码:
首先我们在代码中只定义组件,并不使用。页面中只有打印出school,相当于前面说的school组件本质是个VueComponent构造函数,但是并未执行。
然后我们在页面中使用school组件,打印结果如下:
4.vm(Vue实例)和组件的关系,我们直接打印vm。
console.log(vm);
我们发现有个chilren属性,是个数组,展开之后发现是school对应的VueComponent实例对象
相关文章
- 【译】LiveData三连
- 每天 React, Vue, 你知道如何原生实现 WebComponent吗?
- 前端团队代码规范最佳实践,个人成长必备!
- 一日一技:如果你非要把HTML存到数据库,那么你应该…
- LRU 缓存-keep-alive 实现原理
- 3 个简单的技巧让你的 vue.js 代码更优雅!
- 开源有国界!GitHub、Node.js、React等公开站队,微软对俄禁售
- 聊一聊 WAF CDN 的识别方法
- VFP为公众号添加一个报名功能,代码不多,但谁能得扬名立万
- JSON与XML你不懂就OUT,真相是它们都是字符串
- 手把手教你JS逆向搞定字体反爬并获取某招聘网站信息
- 画一手好的架构图是码农进阶的开始
- 网站运营还是盗版罪犯?这个男人被判欠任天堂1450万美元,服刑3年后打工慢慢还
- J2EE之普通类载入web资源文件的方法
- 你在元宇宙“吃鸡”,我在Web3.0投机,我们都有光明的未来
- 为了生成唯一id,React18专门引入了新Hook:useId
- JS中所有对象隐式转换都是true?除了他...
- 用几行原生JS就可以实现丝滑的元素过渡效果!
- 使用 Rust 编写更快的 React 组件
- 六种方式,教你在SpringBoot初始化时搞点事情!