Vue--》混合文件使用以及ref的引用讲解_亦世凡华、

大大的周 02-07 4211

mixin混合

前言

ref的引用DOM

ref引用组件

mixin混合

在日常开发中，当我们开发的各种组件可能会有相同的内容，我们可以将相同的内容在各个相对应的组件内删除，然后放在同一个配置里。所谓混合：两个或多个组件共享一个配置。当然这个配置文件的名字可以自定义，为了具体语义化，我将这个文件名命名mixin，当然看个人喜好。

配置混合文件 mixin.js ，为了加深了解，继续在混合文件上添加data数据以及添加原组件data数据

// mixin.js export const mixin = { methods:{ showName(){ alert(this.name) } } } export const mixin2 = { // 混合里面的data的数据会和原组件data数据进行整合 data(){ return { x:10, //如果原组件data数据本身就有该数据，以原组件数据为主 y:10 } } }

当然混合也不能包容所有配置项或函数，生命周期函数就是一个特例：它不以任何为主，不管是原组件还是混合文件里面的生命周期函数，只要有都要。

当然混合我们也可以同全局组件一样写到全局配置上，这样我们在混合里面写到data数据或者是methods方法都会写到vm上，直接使用无需调用。当然这样肯定是不合理的，所以Vue官方进行解释：推荐全局mixin应该用于插件开发，不建议应用使用。

总结：

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

使用方式：

1）定义混合文件

2）使用混入文件

局部导入：mixins:['xxx']

全局导入：Vue.mixin(xxx)

PS：这里解释一下 Vue 的插件，所谓Vue的插件类似游戏外挂，让体验感更强一些。

功能：用于增强Vue

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

前言

在我们没使用框架之前，通常一般使用 jquery 来帮助程序员简化操作DOM的过程，随着 Vue 的流行，在MVVM模型的影响下，程序员不需要操作DOM只需把数据维护好就行(也称：数据驱动视图)，既然在 Vue 中不需要操作DOM，所以是很少在 Vue 项目中安装和使用 jquery 的。假设我们在 Vue项目中需要操作DOM怎么办？这时候就需要看看接下来讲解的内容了。

ref的引用DOM

ref用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

<template> <div class="app-container">  <h2 ref="myh1">App父组件</h2> <button @click="showThis">改变颜色</button> </div> </template> <script> export default { methods:{ showThis(){ // console.log(this); this.$refs.myh1.style.color = 'red' } } } </script>

ref引用组件

如果想要使用ref引用页面上的组件实例，则可以按照如下的方式进行操作：

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新 DOM 元素。

<template> <div class="app-container"> <h2>App父组件</h2> <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"> <button v-else @click="showinput">点击显示输入框</button> </div> </template> <script> export default { data(){ return { // 默认输入框隐藏 inputVisible:false } }, methods:{ showinput(){ // 切换布尔值，把文本框展示出来 this.inputVisible = true // 让展示出来的文本框自动获取焦点 this.$nextTick(()=>{ this.$refs.iptRef.focus() }) }, showButton(){ this.inputVisible = false } }, } </script>

总结：

ref属性：被用来给元素或者子组件注册引用信息(id的替代者)，应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

使用方式：

打标识：<h1 ref="xxx">...</h1> 或? <Test ref="xxx"></Test>

获取：this.$refs.xxx