vue2多文件组件学习

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3. 使用方式：

   1. 打标识：<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>

   2. 获取：this.$refs.xxx

props配置项

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<Demo :name="xxx"/>  //v-bind: 简写 :

3. 接收数据：

   1. 第一种方式（只接收）：props:['name'] 

   2. 第二种方式（限制类型）：props:{name:String}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{

         name:{

         type:String, //类型

         required:true, //必要性

         default:'老王' //默认值

         }

      }

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

mixin(混入)

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

   第一步定义混合：

   export xxx {

       data(){....},

       methods:{....}

       ....

   }

   第二步使用混入：

   ​  全局混入：Vue.mixin(xxx)

   ​  局部混入：mixins:['xxx'] 

## 插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

//export default {install(Vue, options){ ... }} 或下面写法

   对象.install = function (Vue, options) {

       // 1. 添加全局过滤器

       Vue.filter(....)

       // 2. 添加全局指令

       Vue.directive(....)

       // 3. 配置全局混入(合)

       Vue.mixin(....)

       // 4. 添加实例方法， 给vue原型上添加一个方法 vc/vm都可以使用

       Vue.prototype.$myMethod = function () {...}

       Vue.prototype.$myProperty = xxxx

   }

4. 使用插件：Vue.use()

scoped样式

1. 作用：让样式在局部生效，防止冲突。

2. 写法：```<style scoped>```

webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value');

        该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. xxxxxStorage.getItem('person');

        ​该方法接受一个键名作为参数，返回键名对应的值。

   3. xxxxxStorage.removeItem('key');

       该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. xxxxxStorage.clear()

      ​  该方法会清空存储中的所有数据。

4. 备注：

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

   2. LocalStorage存储的内容，需要手动清除才会消失。

   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

   4. JSON.parse(null)的结果依然是null。

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Demo @test="test"/>  或 <Demo v-on:test="test"/>

   2. 第二种方式，在父组件中：（使用ref绑定事件）

      <Demo ref="demo"/>

      mounted(){

         this.$refs.xxx.$on('test',this.test)

      }

   3. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。

4. 触发自定义事件：this.$emit('test',数据)

5. 解绑自定义事件this.$off('test')

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

7. 注意：通过this.$refs.xxx.$on('test',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！