非单文件组件
基本使用
- Vue中使用组件的三大步骤
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
- 如何定义一个组件
使用Vue.extend(options)
创建,其中options和new Vue
时传入的那个options几乎一样,但区别如下:
- el不要写,为什么?—最终所有的组件都有经过一个vm的管理,由vm中的el决定服务哪个容器
- data必须写成函数,为什么?—避免组件被复用时,数组存在引用关系
备注:使用template可以配置组件结构
- 如何注册一个组件
- 局部注册:靠
new Vue
中的时候传入components选项 - 全局注册:靠
Vue.component('组件名',组件)
- 编写组件标签
<school></school>
<div id = "root">
<student></student>
</div>
<script type="text/javascript">
//创建组件
const student = Vue.extend({
//创建组件
template:`
<div>
<h2>学生的名字:{{name}}</h2>
<h2>学生的年龄:{{age}}</h2>
</div>
`,
data(){
return {
name:"张三",
age:15
}
}
})
const vm = new Vue({
el:'#root',
//注册组件
components:{
//完整的写法:student:student
student,
}
})
</script>
几个注意点
- 关于组件名:
- 一个单词组成:第一种写法(首字母小写):school;第二种写法(首字母大写):School
- 多个单词组成:第一种写法(kebab-case命名);第二种写法(CameCase命名):MySchool(需要脚手架支持)
- 备注:
组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
- 关于组件标签
- 第一种写法:
<school></school>
- 第二种写法:
<school/>
- 备注:不能使用脚手架时,第二种写法会导致后续组件不能渲染
- 一个简写方式
const school = Vue.extend(options)
//可以简写
const school = options
组件的嵌套
- 组件的嵌套,是在一个组件当中,注册另外一个组件,他们两者之间会形成一个父子关系
<div id = "root">
</div>
<script type="text/javascript">
const student = Vue.extend({
template:`
<div>
<h2>学生的名字是:{{name}}</h2>
</div>
`,
data(){
return {
name:"张三"
}
}
})
const school = Vue.extend({
template:`
<div>
<h2>学校名称:{{name}}</h2>
<student></student>
</div>
`,
data(){
return {
name:"四曲实验室"
}
},
components:{student}
})
const app = Vue.extend({
template:`
<div>
<school></school>
</div
`,
components:{school}
})
const vm = new Vue({
el:'#root',
template:`
<app></app>
`,
components:{app}
})
</script>
VueComponent构造函数
- school组件本质是一个名为VueComponent的构造函数,切不是程序员定义的,是Vue.extend生成的。
- 我们只需要写<school>或
<school></scholl>
,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new Vuecomponend(options)
- 关于this指向:
- 组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【VueComponent实例对象】
new Vue(options)
配置中
data函数、methods中的函数、watch中的函数、computed中的函数,他们的this指向都是【Vue实例对象】
- VueComponent的实例对象,以后简称VC(也可称之为:组件实例对象)。Vue的实例对象,以后成为vm
一个重要的内置关系
- 一个重要的内置关系:
VueComponent.prototype.__proto__===Vue.prototype
- 为什么要有这个关系:让组件实例对象(VC)能够访问到Vue原型上的属性、方法
单文件组件
APP.vue组件文件
<template>
<div>
<Schoool></Schoool>
</div>
</template>
<script>
import School from "./School"
export default {
name:"App",
components:{
School
}
}
</script>
<style>
</style>
School.vue组件文件
<template>
<div>
<h2>学校名称是:{{name}}</h2>
<h2>学校的地址是:{{address}}</h2>
</div>
</template>
<script>
export default {
name:"School",
data() {
return {
name:"四曲实验室",
address:"贵州"
}
},
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容