Vue3 自定义ref代码模版 customRef

最新推荐文章于 2024-09-16 15:23:21 发布

ChuanYang Chen

最新推荐文章于 2024-09-16 15:23:21 发布

阅读量1k

点赞数

分类专栏： Vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45525653/article/details/125031550

版权

前端同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

Vue

29 篇文章 0 订阅

订阅专栏

Vue3 自定义ref代码模版 customRef

<template>
  <input type="text" v-model="keyWord">
  <h3>{{keyWord}}</h3>
</template>

<script>
import { customRef } from "vue";
export default {
  setup() {
    let keyWord = myRef('hello')

    function myRef(value){
      return customRef((track,trigger)=>{
        return {
          get(){
            track() // 通知vue追踪value的变化
            return value
          },
          set(newValue){ // newValue 是input修改后的值
            value = newValue
            // 通知vue去重新解析模板
            trigger()
          }
        }
      })
    }

    return {
      keyWord 
    };
  },
};
</script>