目录
Vue中的ref 引用
ref
用来辅助开发者在
不依赖于
jQuery
的情况下
,获取
DOM 元素或组件的引用。
每个
vue
的组件实例上,都包含一个
$refs
对象
,里面存储着对应的
DOM
元素或组件的引用。
默认情况下,
组件的 $refs
指向一个空对象
。
![](https://i-blog.csdnimg.cn/blog_migrate/43868871d56c360780597c515fff29c9.png)
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)
})