关于Vue脚手架ref属性，props配置，mixin混入，以及插件plugins的简单使用

一、ref属性

1.简述

作用：被用来给元素（html元素，例如span,h2)或子组件注册引用信息（子组件在父组件中使用），它是id的替代者

原生js操作DOM元素还要给标签加上id等属性通过这些属性进行获取，但是在Vue中可以给标签或者组件标签上添加ref属性就可以获取DOM元素

使用方式：

打标识：标签名上或组件标签上添加ref=“xxx”，例如<h1 ref="xxx"></h1>

获取：this.$refs.xxx

2.举例

1.给元素注册引用信息

使用了h1标签上添加ref属性，然后配置了一个点击事件

在方法中使用

效果

2.子组件注册引用信息

在组件上使用会得到这个组件的实例对象，便于父组件使用子组件身上的属性和方法

然后在控制台进行输出发现是VueComponent实例对象，而且还带有子组件的数据，表明父组件可以通过在子组件身上增加ref属性来间接访问或者使用子组件身上的数据或者方法

3.总结

1. 被用来给元素(html元素，例如span)或子组件注册引用信息（子组件在父级组件中使用）（id的替代者）
2. 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc)

二、props配置

1.简述

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

（1）传递数据：

父传子：在父组件中使用的子组件标签上写入所要传入子组件的数据，例如<student name="xxx">

注意：

1. props的值可以是两种，一种是字符串数组，一种是对象
2. 如果我们要传递的东西它本身就是一个字符串，就例如我们举例传的name，它的值是一个字符串，那么我们就可以直接写成上述那种形式
3. 但是如果我们要传递的东西它是个数字，布尔值，数组，对象类型的数据，我们就要使用v-bind进行属性绑定传递，例如传递age=19，因为他的值是19是数字类型，所以我们要写成<student :age ="1" />,使引号里面的值被当成一个js表达式进行计算，如果不使用v-bind传递此类型的数据，则传递的数据都会变成字符串类型，影响结果

(2)接收数据，在组件实例对象身上写上一个props配置，存放接收到的数据：

1. 第一种方式（只接受，就是不管给什么都接收）                                                                       props['name']
2. 第二种方式（限制接收数据的类型,例如限制接收name数据类型为字符串）：                         props:{name:String}
3. 第三种方式（限制类型，限制必要性，指定默认值）                                                                 props:{                                                                                                                                             name:{                                                                                                                                                type:String,            //限制name传入为字符串                                                                            required:true          //限制name必须传过来（必要性）                                                              default:'nihao'        //如果不传name则直接使用设置的默认值                                                     }                                                                                                                                             }

一般第三种方式中的required不与default一块使用，些许冲突，一般都为分开使用

2.举例

例如在父组件App中给子组件Student传入name，sex，age(注意此时的age要用v-bind属性进行绑定，若不绑定19则是一个字符串)

例如在Student使用props进行简单接收

然后将接收到的数据在结构上用插值语法解析出来，得到下列效果图

3.注意：

1. props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告
2. 若有业务需求需要对接收到的数据进行更改，那么就将props中的内容复制到datat中一份，然后去修改data中的数据
3. 如果父组件并没有传递某一个数据，但是子组件在接收时使用了这个数据，那么这个数据的值就是【未定义】
4. 注意父组件传递值的类型，除了是字符串类型的都要使用v-bind予以辅助

三、mixin混入

1.简述

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

使用方式：

1.在src下创建一个mixin.js文件，在里面定义混合（将多个组件相同的配置项写入进去），不要忘记暴露

export const = xxx{

                data(){},

                 methods:{},

                  ........

                       }

2.使用混合：

1. 全局混入：Vue.mixin(xxx)   [main.js]
2. 局部混入：mixins:[xxx]  [子组件]

2.举例

1.全局引入

在main,js中进行全局引入并且使用

在新建的mixin.js中写入多个组件共用的配置（假如是methods中的showName方法）

然后如果用的话，就直接在组件早上直接用，特别方便

下面效果图：

2.局部引入

若是局部引入的话，就要在组件之中进行引入mixin.js文件，并且配置mixins配置项，其值是一个数组

效果图：

3.注意

• mixin中的生命周期函数会和组件的生命周期一起合并执行
• mixin中的data数据在组件中可以使用
• mixin中的方法在组件内部可以直接调用
• 生命周期函数合并后执行顺序:先执行mixin中的,然后执行组件的
• mounted不会合并,都会加载一遍
• 不同组件中的mixin是相互独立的,改变一个组件中mixin中的数据,另一个引用了mixin的组件不会受影响

四、插件plugins

1.简述

功能：用于增强Vue，使Vue变得更强大

在新建的plugins.js中可以：

1. 写入全局的过滤器
2. 可以添加全局的自定义指令
3. 配置全局混入（摒弃了上面介绍mixin再创建一个文件的复杂流程，直接在plunins中写入，全局使用）
4. 给vue的原型对象添加方法，方便vc与vm使用
5. ......

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

写法：在src下创建一个plugins.js文件，依下面格式写入

export default{      //向外暴露

install(Vue){

......(写入配置) 

}

}

然后在main.js中进行引入并使用,注意：插件的使用要在vm创建之前使用，遵循先后顺序

import plugins from '路径'   //引入插件

Vue.use(plugins)    //使用插件

然后就可以在全局进行使用在插件里写过的内容啦

2.举例

2.1. 自定义混入

Vue.mixin({
created: function () {
// 逻辑...
}
...
})

例如在plugins.js文件中配置全局混入在里面定义一个方法

接着我们就可以去组件里面直接使用，给标签设置一个点击事件

效果成功：

2.2.自定义指令

Vue.directive('定义的指令名字', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
})

例如定义一个v-upper的指令，其中bind函数有四个参数，但一般都是用前两个比较多，可以输出打印一下就明白他们各自代表着什么了

引入并使用自定义指令

在组件中使用定义好的指令，测验一下

效果图

3.总结

更多插件相关:  插件 — Vue.js

定义插件：

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

        <!-- 1.添加全局过滤器 -->

        Vue.filter(.....)

        <!-- 2.添加全局指令 -->

        Vue.directive(.....)

       

        <!-- 3.配置全局混入（合） -->

        Vue.mixin(.....)

        <!-- 4.添加实例方法 -->

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

        Vue.prototype.$myProperty = xxxx

    }

    使用插件：Vue.use()

在Vue中合理的运用插件，让代码变得更强大