Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）

欢愉～

已于 2022-05-03 11:22:38 修改

阅读量5.2k

点赞数

分类专栏： Vue2.x 文章标签： vue.js

于 2022-04-23 17:00:26 首次发布

本文链接：https://blog.csdn.net/m0_61612505/article/details/124365060

版权

Vue2.x 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

4.this.$nextTick(cb) 方法

Vue中的ref 引用

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

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。

默认情况下，组件的 $refs 指向一个空对象。

1. 使用 ref 引用 DOM 元素

在需要操作的元素加上ref="引用的名字"，
在方法内容就可以通过this.$refs.引用的名字获取到元素并进行操作

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <hr>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  methods: {
    /* 每个 vue 的组件实例上，
    都包含一个 $refs 对象，
    里面存储着对应的 DOM 元素或组件的引用。
    默认情况下，组件的 $refs 指向一个空对象。 */
    showThis(){
      /* 当前APP组件的实例对象 */
      console.log(this);
      this.$refs.myh1.style.color='red'
    },
  },
}
</script>

2. 使用 ref 引用组件

使用ref属性，为对应的组件添加引用名称
通过this.$refs.引用的名称，可以引用组件的实例
引用到组件的实例之后，就可以调用组件上的methods

3. 控制文本框和按钮的按需切换

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的 .focus() 方法即可

4.this.$nextTick(cb) 方法

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

<template>
  <div class="app-container">
    <hr />
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="shouInput">展示输入框</button>
    <hr>
  </div>
</template>

<script>

export default {
  data() {
    return {
      /* 控制输入框和按钮的按需切换
      默认false ，展示按钮，隐藏输入框 */
      inputVisible:false
    }
  },
  methods: {
    shouInput(){
      /* 1.让输入框显示 */
      this.inputVisible=true,
      // 2.让展示出来的文本框自动获取焦点
      // this.$refs.iptRef.fcous()
      // console.log(this.$refs.iptRef);
      /* 组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 
      DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成
      之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作
      到最新的 DOM 元素。 */
      this.$nextTick(()=>{
        this.$refs.iptRef.focus()
      })
    },
    showButton(){
      this.inputVisible=false
    }
  },
}
</script>

mixin.js混合配置

mixin（混入）

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

第一步定义混合，第二步使用混入（全局混入，局部混入）

当两个组件需要用到相同的方法或数据可以进行封装到mixin.js模块

/* 按需导出 */
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
/* 按需导出 */
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

1.局部混合（在组件中）

<script>
	//引入一个hunhe
import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'MySchool',
		data() {
			return {
				name:'迪丽热巴',
				address:'新疆',
				x:666
			}
		},
      //混入配置
		mixins:[hunhe,hunhe2],
	}
</script>

如果组件内有的数据，mixin.js也有，那么组件内数据优先级更高

2.全局混合（在main.js）

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
/* 全局混合mixin.js */
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

Vue的插件

1.定义插件（在plugin.js）

Vue 插件是一个包含 install 方法的对象，
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

export default {
   install(){

    }
}

plugins.js：

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

2.使用插件（在main.js）

先导入import .......

再使用Vue.use（导入的插件）

import Vue from 'vue'
import App from './App.vue'
//引入插件
import plugins from './plugins'

//应用（使用）插件
Vue.use(plugins,1,2,3)

new Vue({
	el:'#app',
	render: h => h(App)
})