Vue学习计划-Vue2--VueCLi（三）ref属性、mixins混入、插件、scoped样式

1. ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VC（VueComponent））
3. 使用方式：
   1. 打标识<h1 ref="xxx">.....</h1>或者<School ref="xxx"></School>
   2. 获取：this.$refs.xxx

示例： 我们只需要两个组件，父组件APP.vue，子组件MyCount.vue，需求：父组件操作子组件内的数据与方法

1. 文件目录:components文件夹内创建MyCount.vue文件
   

2. 在MyCount.vue中，写代码： 注意：data中写数据，必须是函数

   

3. 在App.vue文件中引入MyCount.vue：

4. 页面中展示效果：
   

5. 效果分析：

1. 初始值count为10，表示10人观看
2. 点击按钮有人走了(子组件内部控制count)，人数减少
3. 点击按钮来人了(父组件内需要操作组件内部数据)，人数增加
4. 可以看到App.vue内部引入的MyCount标签上添加了ref属性,methods内部的事件也输出了this.refs.MyCount，控制台输出结果为：
   
   可以看出，this.$refs.MyCount直接输为MyCount组件，所以可直接this.$refs.MyCount.count++;改变子组件的数据

2. mixin（混入/共享）

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

• 使用方式：

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

示例：我们需要4个组件，父组件APP.vue，子组件MySchool.vue,MyStudent.vue,mixins.js，需求：MySchool.vue和MyStudent.vue两个组件内有同样的方法和数据，可否优化？

1. App.vue组件引入两个组件
   

2. MySchool.vue组件内部：
   

3. MyStudent.vue组件内部：
   

4. App.vue同级创建mixins文件夹，新建mixins.js：
   

5. 效果分析：

1. 每个组件内部都有数据name和方法outPut，我们可以创建共享文件mixins.js实现共享，（data、computed、methods等）
2. 若组件内部有同名的数据，优先级会更高

3. 插件

1. 功能： 用于增强Vue

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

3. 定义插件：

   对象.install = function(Vue, options){
   // ......全局过滤器，全局指令，配置混入
   // 添加实例方法
   Vue.prototype.myMethods = funciton () {} Vue.prototype.myProperty = funciton () {}
   }

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

4. scoped样式

• 作用： 让样式在局部生效，防止冲突（只控制本组件及以下样式）
• 写法：<style scoped>
  示例：准备两个组件，父组件App.vue和子组件MySchool.vue，需求：子组件内写样式不影响父组件的样式

1. 父组件App.vue:
   

2. 子组件MySchool:
   

3. 实际效果：子组件内写样式，影响父组件了
   

4. 加上scoped:
   

5. 效果显示：并未影响