0
点赞
收藏
分享

微信扫一扫

Web前端开发之VUE12——ref引用,$nextTick,动态组件,keep-alive标签

Alex富贵 2022-04-19 阅读 41

目录

ref引用:

异步操作后ref中对象无法获取到的问题:

$nextTick方法

动态组件:

keep-alive状态:


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>

其原理就是:将组件的相关信息缓存在内存中,并在下一此调用时,重新复用。

举报

相关推荐

0 条评论