文章目录
3.3非单文件组件
问题:“单文件组件”与“非单文件组件”区别?
3.3.1使用Vue.extend({})方式创建组件(了解,实际不常用)
Vue.extend({})属于vue的全局API,在实际业务开发中很少使用,因为相比较vue.component来说,使用Vue.extend({})更加繁琐,但在一些独立组件开发场景中,Vue.extend+$mount是个不错的选择。
注意点1:Vue.extend的配置参数中不可以使用el绑定挂在id,跟创建vm实例不同
注意点2:组件使用方式3步:
- 第一步:创建组件
- 第二步:注册主键
- 第三步:使用组件
注意点3:注册局部组件可以写简写方式
普通方式:K,V形式,其中前面的K才是主键真实名字,后面V名字不起效果,当然为了方便辨认,创建的名字K,V尽量保持一致即可
components:{
'hello': 'hello':
}
简写方式:只保留K即可,省略V
components:{
'hello'
}
注意点4:组件名由一个单词组成小写hello,实际在Vue开发者工具中会首字母大写Hello,组件名由多个单词组成,实际在Vue开发者工具中会多个单词首字母都大写,当然只是个展示样式而已。
注意点5:定义组件简写形式const school = Vue.extend(options) 可简写为:const school = options,说明定义组件时未绑定Vue.extend,那么vue会默认包裹一层Vue.extend,如果定义组件绑定了Vue.extend,那么vue就会跳过包裹步骤。
举例:
<div id="root">
<!-- 第三步:使用组件标签 -->
<hello></hello>
<hr>
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
//第一步:创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊!{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
//第二步:全局注册组件
Vue.component('hello',hello)
//创建vm
new Vue({
el:'#root',
data:{
msg:'你好啊!'
},
//第二步:注册组件(局部注册)
components:{
'hello'
}
})
3.3.2组件嵌套
举例:练习组件嵌套
div id="root">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
//注册组件(局部)
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{{msg}}</h1>`,
data(){
return {
msg:'欢迎来到尚硅谷学习!'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件(局部)
components:{app}
})
</script>
3.3.3VueComponent构造函数
注意点1:vm管理一堆的vc
注意点2:
问题:vc和vm区别? vc≠vm
答案:
相同点:属性和方法99%相同
不同点:
1)vm可以绑定el决定为哪个容器服务,而vc不可以,vc只能被vm管理
2)vm的data可定义对象形式,可定义函数形式,而vc中data只能定义函数形式
注意点3:“组件实例对象” =》 简称vc
问题:“组件实例对象”是啥呢?
答案:就是小型的vm
<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>
3.3.4一个重要的内置关系
注意点1:
Demo.prototype =》 指代Demo函数上面的“显示原型属性”
d.__proto__ => 指代实例d上面的“隐式原型属性”
无论是“Demo函数上面的显示原型属性”还是“实例d上面的隐式原型属性”都指向同一个对象,它叫“原型对象”
注意点2(重要):
一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
注意点3(重要):一句话:实例的隐式原型属性永远指向自己缔造者的原型对象
注意点4:下面图将展示注意点2的关系,即“让组件实例对象(vc)可以访问到 Vue原型上的属性、方法”。
3.4单文件组件
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)
9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)
13.vue2知识点:组件的props属性、非props属性、props属性校验
16.vue2知识点:动态组件
17.vue2知识点:混入
19.vue2知识点:全局事件总线(GlobalEventBus)
23.vue2知识点:路由
25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)
26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习:待办事项Todo-list案例练习
28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/106191.html