Vue2与Vue3中Ref绑定元素

Vue2与Vue3中Ref绑定元素

Vue之Ref绑定元素获取实例

  • 我们可以通过给元素绑定ref属性来获取这个元素的实例,来调用实例中的某种方法来实现某种功能

Vue2实现

<template>
    <!-- 单个绑定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循环绑定 -->
  <div v-for="item in arr" :key="item">
    <hello-world ref="HelloArrRef"></hello-world>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name"App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      count:0
    };
  },
  mounted() {
    console.log(this.$refs.HelloRef, "HelloRef");//结果为单个对象
    console.log(this.$refs.HelloArrRef, "HelloArrRef");// 结果为数组 
  },
  methods: {
  },
};

在vue2写法下,无论绑定单个元素或者循环绑定元素我们可以通过this.$refs.实例名称来获取组件实例

Vue3实现

vue3中循环绑定ref是和vue2写法略有不同,单个组件绑定写法是一致的

<template>
  <!-- 单个绑定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循环绑定 -->
  <div v-for="item in arr" :key="item">
    <hello-world :ref="setItemRef"></hello-world>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { defineComponent, onMounted,onBeforeUpdate,onUpdated, ref } from "vue";

export default defineComponent({
  name"App",
  components: {
    HelloWorld,
  },
  setup() {
    const HelloRef = ref(null);
    const arr = ref([123]);
    const HelloRefArr = ref([]);
    const setItemRef = (el) => {
      if (el) {
        HelloRefArr.value.push(el);
      }
    };
     onMounted(() => {
      console.log(HelloRef.value, "HelloRef");
      console.log(HelloRefArr.value, "HelloRefArr");
    });
    onBeforeUpdate(() => {
      HelloRefArr.value = []
    })
    onUpdated(() => {
      console.log(HelloRefArr.value,' HelloRefArr.value--update')
    })
    return {
      HelloRef,
      arr,
      setItemRef,
      HelloRefArr,
    };
  },
});
</script>

在vue3中循环绑定元素,与vue2不同是 ref需要先绑定一个方法通过这个方法获取到实例保存在一个数组中( 注意:1.不必是数组:它也可以是一个对象,其 ref 可以通过迭代的 key 被设置。2.如有需要,HelloRefArr 也可以是响应式的,且可以被侦听。)在需要的时候通过这个数组去取。

官方文档:

vue2—ref(https://cn.vuejs.org/v2/api/#ref) vue3—ref(https://v3.cn.vuejs.org/guide/migration/array-refs.html#frontmatter-title)

————————————————

版权声明:本文为CSDN博主「Wyyyy1024」的原创文章

原文链接:https://blog.csdn.net/weixin_44389562/article/details/125285240


原文始发于微信公众号(前端24):Vue2与Vue3中Ref绑定元素

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/216537.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!