Vue组件

组件的使用

Vue中使用组件的三大步骤:

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

---

1. 如何定义一个组件?
   使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别;
   区别如下:
   1. el不要写，为什么?—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
   2. data必须写成函数，为什么?——避免组件被复用时，数据存在引用关系。
      备注:使用template可以配置组件结构。
2. 如何注册组件?
   1. 局部注册:在新的组件文件中new Vue的时候将要注册的组件名写入components中即可

   import HelloWorld from '@components/HelloWorld'
   export default {
   	HelloWorld
   }
   

   2. 全局注册:在新的组件文件中写Vue.component('组件名",组件)

   import HelloWorld from '@components/HelloWorld'
   Vue.component('HelloWorld', HelloWorld)
   

3. 编写组件标签:
   例如<HelloWorld></HelloWorld>

组件注意事项

1. 关于组件名:
   一个单词组成:
   第一种写法(首字母小写): school
   第二种写法(首字母大写):School

   多个单词组成:
   第一种写法(kebab-case命名):my-school
   第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

   备注:

   1. 组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
   2. 可以使用name配置项指定组件在开发者工具中呈现的名字。

2. 关于组件标签:
   第一种写法:<HelloWorld></HelloWorld>
   第二种写法: <HelloWorld/>
   备注:不用使用脚手架时,<HelloWorld/>会导致后续组件不能渲染。

3. 一个简写方式:
   const HelloWorld= Vue.extend(options）可简写为: const HelloWorld= options

关于VueComponent

1. HelloWorld组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2. 我们只需要写<HelloWorld/>或<HelloWorld></HelloWorld>，Vue解析时会帮我们创建HelloWorld组件的实例对象，即vue帮我们执行的:new VueComponent(options)-
3. 特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent! !! !I
4. 关于this指向:
   1. 组件配置中:
      data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueCcomponent实例对象】。
   2. new Vue()配置中:
      data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
5. VueComponent的实例对象，简称vc（也可称之为:组件实例对象）。
   Vue的实例对象,以后简称vm.

不同版本的vue

1. vue.js 与vue.runtime.xxx.js的区别:
   1. vue.js是完整版的Vue，包含:核心功能+模板解析器。
   2. vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

ref属性

1. 被用来给元素或子组件注册引用信息(id的替代者)
2. 应用在html标签上获取的是真实DOM元素。应用在组件标签上是组件实例对象(vc)
3. 使用方式:
   打标识:
   <h1 ref=“xxx”>…</h1>或<HelloWorld ref=“xxx”></HelloWorld>
   获取:
   this.$refs.xxx

props

功能:让组件接收外部传过来的数据
(1).传递数据:
<Demo name="xxx/>
(2).接收数据:

第一种方式(只接收):props: [ "name"]
第二种方式(限制类型):props:{
	name:Number
}
第三种方式(限制类型、限制必要性、指定默认值):props:{
	name:{
		type:String,//类型
		required:true,//必要性
		default:"老王"//默认值
	}
}

备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin（混入）

功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:

第一步定义混合,例如:
{
data(){},
methods:{}
...
}
第二步使用混入,例如:
(1).全局混入:Vue.mixin(xxx)
(2).局部混入:mixins: ["xxx"]

插件

功能:用于增强Vue
本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件:
对象.install = function (vue,options){
	//1.添加全局过滤器
	Vue.filter(..)
	//2．添加全局指令
	Vue.directive(... .)
	//3.配置全局混入(合)
	Vue.mixin(...)
	//4.添加实例方法
	vue.prototype.$myMethod = function (){...}
	vue.prototype.$myProperty = XXXX
使用插件:Vue.use()

scoped样式

作用:让样式在局部生效,防止冲突(防止多个文件中class名字相同导致 style 混乱)
写法: <style scoped>