Vue 非单文件组件的基本使用
Vue 中存在两种组件的编写形式：单文件组件、非单文件组件
单文件组件：一个文件中只包含一个组件
非单文件组件：一个文件中包含多个组件
使用组件的三大步骤
- 创建组件
- 注册组件
- 使用组件
一、创建组件
使用 Vue.extend(options) 创建，其中 options和 new Vue(options) 中的 options 有区别
区别：
- el 不要写：因为最终所有组件都归一个 vm 管理，由 vm 中的 el 决定服务容器
- data 必须写成函数：为了避免组件被复用时，数据存在引用关系
示例
const student = Vue.extend({
template: `
<div>
<h3>学生姓名：{{studentName}}</h3>
<h3>学生年龄：{{age}}</h3>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
}
})
二、注册组件
局部注册组件：在 new Vue 时传入 components 选项
全局注册组件：使用 Vue.component('组件名',组件)
示例
// 注册组件（局部）
components: {
school,
student
}
// 注册组件（全局）
Vue.component('student',student)
三、使用组件
编写组件标签使用组件
示例
<school></school>
非单文件组件的基本使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h3>{{msg}}</h3>
<hr>
<!-- 使用组件 -->
<school></school>
<hr>
<student></student>
</div>
</body>
<script type="text/javascript">
// 创建组件
const school = Vue.extend({
template: `
<div>
<h3>学校名称：{{schoolName}}</h3>
<h3>学校地址：{{address}}</h3>
<br>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: 'ABC',
address: '长沙',
}
},
methods: {
showName() {
alert(this.schoolName)
}
}
})
const student = Vue.extend({
template: `
<div>
<h3>学生姓名：{{studentName}}</h3>
<h3>学生年龄：{{age}}</h3>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
}
})
// 全局注册组件
// Vue.component('student',student)
new Vue({
el: '#root',
data: {
msg: '你好'
},
// 注册组件（局部）
components: {
school,
student
}
})
</script>
</html>
