vue-16 组件的使用
2024-04-24 本文已影响0人
_RG
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=54&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b
Vuecomponent 函数的本质 (组件的本质)
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=57&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b
内置关系vuecompoment.prototype.__proto__ === Vue.prototype
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=59&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b
截屏2023-09-13 15.09.12.png
特别注意, 命名组件时尽量统一小写, 或者fir-name这种, 如果使用了驼峰命名, 例如firName, 则html中使用时使用<fir-name></fir-name>
如果使用 驼峰命名, 引入时也使用驼峰, 则需要引入Vue脚手架
所有的组件本质上是一个构造函(vuecomponent函数)
- 组件的创建
使用Vue.extend创建
1.1 组件包含的HTML模版template, template中必须使用一个div包裹其他的HTML标签, 且template模版中包含的html字符串用``进行包裹
1.2 组件的数据, data (){}, 只能使用函数的形式
1.3 组件没有el属性
-
组件的注册
创建vm对象, 使用components关键字进行组件注册 -
组件的使用,
<student></student>使用html标签的形式进行使用 -
全局注册组件使用
Vue.componen -
可以使用
name配置项指定组件在开发者工具中显示的名字
<body>
<div id="root">
<!-- 3.组件的使用 -->
<gload-res></gload-res>
<jianxie></jianxie>
<hr>
<school></school>
</div>
<script>
//1. 创建组件, data只能用函数形式, template包含组件里面包含的样式
const options = {
template: `<div>
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>`,
data() {
return {
name: "简写方式",
address: "长沙"
}
},
}
const jianxie = options
const school = Vue.extend({
template: `<div>
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>`,
data() {
return {
name: "长郡",
address: "长沙"
}
},
})
const student = Vue.extend({
template: `<div>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>`,
data() {
return {
name: "无敌",
age: "18"
}
},
})
const gloadRes = Vue.extend({
template: `<div>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>`,
data() {
return {
name: "全局注册1114774",
age: "18"
}
}
})
//2.注册组件, 全局注册
Vue.component('gloadRes',gloadRes)
//2.注册组件, 将组件注册到VM种进行使用, 局部注册
new Vue({
el: '#root',
components: {
school: school,
student: student,
jianxie: jianxie
// gloadres: gloadres
}
})
</script>
</body>
</html>
简写方式
const jianxie = Vue.extend(options) 可简写为 const jianxie = options
const options = {
template: `<div>
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>`,
data() {
return {
name: "简写方式",
address: "长沙"
}
},
}
const jianxie = options
