目录
那就期待下一章！！！总结不易~ 本章节对我有很大收获 希望对你也是！！！！
🚀 Vue 非单文件组件 和 单文件组件 的区别与实践对比
✨ 引言
在学习 Vue 的过程中，我们经常会接触到两种不同的写法：一种是在 HTML 中用 <script> 标签直接使用 Vue，另一种则是用 .vue 文件编写的单文件组件。那么它们有什么区别？我们又该在什么场景下选择哪种方式呢？
一、非单文件组件
1. 基本使用
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
1、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
2、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
3、编写组件标签：
<school></school>
<div id="root">
<!-- 第三步：编写组件标签 -->
<h1>{{msg}}</h1>
<hr>
<hello></hello>
<school></school>
<hr>
<student></student>
<student></student>
<div>
<hello></hello>
</div>
</div>
<script>
// 第一步：1. 创建组件
// 创建school组件 跟vm几乎一模一样 但是还是有部分不同 里面的配置选项 vm怎么写 组件就怎么写
// 组件 不需要指定为谁服务 也就是不用写el 组件就是一块砖 哪里需要哪里搬
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
// el: '#root',
// 组件定义时，一定不要写el配置项 因为最终所有的组件都要被一个vm管理 由vm决定服务于哪个容器
data() {
return {
schoolName: '武汉传媒学院',
address: '湖北武汉',
}
}
})
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生名称：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
studentName: '张三',
age: '18'
}
}
})
// 第一步： 创建hello组件
const hello = Vue.extend({
template: `
<div>你好啊 我是{{name}}</div>
`,
data() {
return {
name: 'hha'
}
}
})
// 第二步 ： 全局注册组件
// 第一个参数： 组件的名字， 第二个参数： 组件在哪
Vue.component('hello', hello)
// 第二步：创建vm
new Vue({
el: '#root',
data: {
msg: '你好啊'
},
components: {
school,
student
}
})
// function data() {
// return {
// a: 1,
// b: 2
// }
// }
// const x1 = data()
// const x2 = data()
// let data = {
// a: 1,
// b: 2
// }
// const x1 = data
// const x2 = data
// 创建 vm
// const vm = new Vue({
// el: '#root',
// data: {
// schoolName: '武汉传媒学院',
// address: '湖北武汉',
// studentName: '张三',
// age: '18'
// }
// })
</script>2. 注意：
1.关于组件名:
一个单词组成：
- 第一种写法(首字母小写)：school
- 第二种写法(首字母大写)：School
多个单词组成：
- 第一种写法(kebab-case命名)：my-school
- 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
- 可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
- 第一种写法：<school></school>
- 第二种写法：<school/>
- 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式：
- const school = Vue.extend(options) 可简写为：const school = options
<div id="root">
<h2>欢迎来到{{msg}}学习</h2>
<school></school>
</div>
<script>
// 定义组件
// 简写
const school = {
name: 'wshihha',
template: `
<div>
<h4>学校名称：{{schoolName}}</h4> <br>
<h4>学校地址：{{address}}</h4>
</div>
`,
data() {
return {
schoolName: '武汉传媒学院',
address: '湖北武汉'
}
}
}
// const school = Vue.extend({
// name: 'wshihha',
// template: `
// <div>
// <h4>学校名称：{{schoolName}}</h4> <br>
// <h4>学校地址：{{address}}</h4>
// </div>
// `,
// data() {
// return {
// schoolName: '武汉传媒学院',
// address: '湖北武汉'
// }
// }
// })
new Vue({
el: '#root',
data: {
msg: '武汉传媒学院'
},
components: {
school
}
})
</script>3. 组件的嵌套
- 就是将单个组件全部放入一个app组件内
// 定义student组件
const student = {
template: `
<div>
<h4>学生名称：{{studentName}}</h4>
<h4>学生年龄：{{age}}</h4>
</div>
`,
data() {
return {
studentName: 'wshha',
age: 18
}
}
}
// 定义school组件
const school = {
template: `
<div>
<h4>学校名称：{{schoolName}}</h4>
<h4>学校地址：{{address}}</h4>
<student></student>
</div>
`,
data() {
return {
schoolName: '武汉传媒学院',
address: '湖北武汉'
}
},
// 注册组件（局部）
components: {
student
}
}
// 定义hello组件
const hello = {
template: `
<div><h2>欢迎来到{{name}}学习!</h2></div>
`,
data() {
return {
name: '武汉传媒学院'
}
}
}
// 定义app组件
const app = {
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school,
hello
}
}
new Vue({
template: `
<app></app>
`,
el: '#root',
components: {
app
}
})
4. 关于VueComponent：
- school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
- 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
- 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
- 关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。
<div id="root">
<school></school>
<hello></hello>
</div>
<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>5. 一个重要的内置关系（有点难理解）
- 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
- 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
<div id="root">
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.prototype.x = 99
//定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showX">点我输出x</button>
</div>
`,
data() {
return {
name: '武汉传媒学院',
address: '北京'
}
},
methods: {
showX() {
console.log(this.x)
}
},
})
//创建一个vm
const vm = new Vue({
el: '#root',
data: {
msg: '你好'
},
components: { school }
})
//定义一个构造函数
function Demo() {
this.a = 1
this.b = 2
}
//创建一个Demo的实例对象
const d = new Demo()
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__) //隐式原型属性
console.log(Demo.prototype === d.__proto__)
//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99
console.log('@', d)
</script>
二、 单文件组件
可以分为4个部分：小组件 Students.vue、School.vue 和 index.html 以及 main.js 最后将两个小组件都放入App.vue进行整合
App.vue: 进行组件引入
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from './School.vue'
import Student from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>main.js:进行引入组件后调用
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})写到这里， 留一个悬念 其实这里并跑不起来 ！必须要在脚手架的环境下才能运行 ~