目录
ref引用:
示例代码,代码中加入了组件中元素的控制:
//app.vue
<template>
<div ref="mydiv">使用ref得到我</div>
<cp1 ref="mycp1"></cp1>
<input type="color" v-model="color" @change="changeColor">
<button @click="changeColor(color)">点我改变组件背景色</button>
</template>
<script>
import CP1 from './components/ref的使用/组件1.vue'
let dom=null
export default {
data(){
return {
color:'#ffffff'
}
},
components: {
cp1: CP1
},
methods:{
changeColor(){
dom.mycp1.$refs.mydiv.style.backgroundColor=this.color
}
},
mounted() {
dom=this.$refs
}
}
</script>
<style scoped>
</style>
//CP1.vue
<template>
<div ref="mydiv">我是外部组件</div>
</template>
<script>
export default {
name: "组件1"
}
</script>
<style scoped>
</style>
异步操作后ref中对象无法获取到的问题:
先来看一个案例:
此时我想做一个按钮和一个输入框组合,默认状态下只显示按钮,当点击后显示输入框,隐藏按钮。
<template>
<div ref="mydiv">
<div>
<input type="text" v-if="toggleShow" ref="inputRef">
<button v-else @click="toggleInput">显示文本框</button>
</div>
</div>
</template>
<script>
import {onUpdated} from "vue";
export default {
name: "组件1",
props: {
'toggleShow': {
default:false,
type:Boolean
}
},
emits: ['update:toggleShow'],
methods: {
toggleInput(){
this.$emit('update:toggleShow',!this.toggleShow)
this.$refs.inputRef.focus()
}
}
}
</script>
代码看起来没有问题,但是会报错,提示在$refs中没有找到inputRef。这是因为执行$emit时,会产生异步操作,此时focus方法会在异步操作完成之前调用,此时页面上并没有加载标签input,导致报错。那么有什么办法解决问题呢?
第一种:promise中async和await方法
async toggleInput(){
await this.$emit('update:toggleShow',!this.toggleShow)
this.$refs.inputRef.focus()
}
等待异步任务执行后再执行后面的代码。
第二种:
$nextTick方法
当然vue也给了我们解决的办法。
示例代码:
toggleInput(){
this.$emit('update:toggleShow',!this.toggleShow)
this.$nextTick(()=>{
this.$refs.inputRef.focus()
})
}
动态组件:
示例代码:
<template>
<div>
<button @click="dynamicCP='CP1'">点我切换至组件1</button>
<button @click="dynamicCP='CP2'">点我切换至组件2</button>
<component :is="dynamicCP"></component>
</div>
</template>
<script>
import CP1 from './components/components标签/组件1.vue'
import CP2 from './components/components标签/组件2.vue'
export default {
data(){
return{
dynamicCP:'CP1'
}
},
components:{
CP1,CP2
}
}
</script>
在组件一中我设置了一个按钮让组件中的值进行自增,当我们切换至组件二再切回头时,组件一的值会被重置。怎么解决这一问题呢?
keep-alive状态:
由于动态组件会在切换组件时,直接将其销毁,并插入新组件,类似v-if的效果。所以,我们如果要保持组件不被销毁,使用keep-alive来保持其原状态即可。
<keep-alive>
<component :is="dynamicCP"></component>
</keep-alive>
其原理就是:将组件的相关信息缓存在内存中,并在下一此调用时,重新复用。