Vue组件化编程(2)
文章目录
1、什么是组件
组件的定义：用来事项局部（特定）效果功能的代码集合
组件的作用：提高代码的复用率、简化项目编码、提高运行效率
组件化编程分成 单文件组件、非单文件组件两种模式
2、非单文件组件
使用组件分成三步
第一步 ：在Vue实例化完成之前 通过**Vue.extend(option)**创建一个组件
第二步 ：在组件中开始编写html结构和data数据甚至一些事件逻辑
第三步 ：在创建好的的Vue实例中通过components配置属性中注册组件
注意在组件中的配置项 几乎与Vue实例中的配置项一样，但是组件中不能配置el属性
因为组件并不是单独为一个内容服务的
局部注册组件
<body>
<div id="root">
<xuesheng></xuesheng>
</div>
</body>
<script>
// 第一步 注册组件
const student=Vue.expend({
// 无需配置el属性
// 第二步 配置基本内容
// 配置data数据
data(){
return {
name:"CareeBy",
age:18
}
},
// 通过模板字符串 配置html 文本结构
template:`
<div>
<h1>学生姓名：{{name}}</h1>
<h2>学生年龄：{{age}}
</div>`,
})
// 实例Vue对象
const vm=new Vue({
el:"#root",
// 第三步 局部注册组件
components:{
// 这里key值 用于作为引入标签
xuesheng:student
}
})
</script>
全局注册组件
<body>
<div id="root">
<school></school>
</div>
</body>
<script>
Vue.component("school",school)
</script>
注意：组件中的Data配置项必须写成函数式，因为组件中存在引用关系，若不这么做则会报错
通过函数式返回的data数据，每一次返回都会是一个新数据，不存在互相影响的情况
3、Vue组件名的注意使用
1、关于组件的名组成：
一个单词组成
- 第一种写法：首字母小写—school
- 第二种写法：首字母大写—School
多个单词组成
- 第一种写法：用【-】分隔；my-school / My-School
- 第二种写法：根据单词首字母大写；MySchool(注意该写法必须在脚手架环境下使用)
2、关于组件标签的使用
- 第一种写法：
- 第二种写法：
备注：第二种方法不用脚手架时会导致后续使用该标签的组件不能够渲染页面
3、组件创建的简写
-
标准写法：const school =Vue.extend(options)
-
简写模式：const school=option
备注：简写模式是直接传入了一个组件的配置对象、没有调用Vue.entent()方法；但是在Vue工作时在Components配置项中会进行一个判断，看你由有没有使用Vue.entend() 方法；若没有则会自动帮你调用
4、组件配置项扩展
其实在创建组件时还存在着一个名为【 name 】的配置项
定义该配置项，没有什么实质性的操作；唯一的用途就是配置后，你的组件依旧正常使用、正常配置，但是在Vue开发者工具查看当前组件时，组件名是当前name的参数
这种配置一般多用于第三方库；我们可以选择不配置
5、Vue Component构造函数详情
1、Vue Component的本质
我们创建的组件本质上就是一个VueComponent的构造函数，但这并不是程序自己定义的，而是extend()生成的
2、Vue Component的来历
我们只需学或者，Vue在解析模板是会自动帮我们创建School组件的实例对象，也就是帮我们执行new Vue Component(option)
3、Vue Component实例注意事项
每次执行extend()，都会返回一个全新的Vue Component实例对象，因此在每一个组件中的this指向都不一样
4、关于this指向的问题
- 在组件中的methods、watch、computed中的函数，他们的this均是VueComponent实例对象
- 在newVue中methods、watch、computed中的函数，他们的this指向均是Vue实例对象
5、Vue Component简称
组件中Vue Component实例对象通常称作VC，Vue的实例对象称作VM
6、Vue Component的原型关系
内置关系 VueComponent.prototype._ proto _=== Vue.prototype
首先我们通常使用vm是Vue的一个实例对象，因此我们通过 vm.prototype可以找到 Vue的原型对象
最终可以找到顶层Objcet
理论上VueComponent也是同理，vc.prototype._ _proto _ _===Object
当然这也没有任何问题、但是Vue做了一件事情，他让vc实例的原型的指向了vue.prototype，然后再指向Object顶层原型
因此Vue原型上的东西 Vc也有，这也就解释清除了为什么vc和vm为什么这么相似的问题了
6、单文件组件
xxx.Vue这种文件时Vue提供的一种特殊文件，需要经过特殊编译才可以再浏览器上正常使用
通常我们通过webpack打包一套工作流,当然整体的流程会比较麻烦
但是Vue官方向我们提供了脚手架，这是官方打造好的一套工作流
首先VsCode安装插件《Vetur》
单文件组件中的内容分成三个模块也就是三个标签
其他标签不允许出现，会报错；非单文件组件的弊端就是CSS样式不能跟着走
每当创建完毕一个组件后，要投入到最后的正常使用则需要一个最大的App.vue用于管理所有组件
然后再创建Main.js在该文件中创建Vue实例，通过模块化的暴露引入完成最后的内容构建
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
