原创

vue3-ref


声明储存ref

<template>
  <div>
    <p ref="refTest">零三</p>
    <button @click="changeRefText">change ref text</button>
  </div>
</template>

<script>
  import {ref} from 'vue'
  export default {
    name: 'App',
    setup(){
      const refTest = ref(null)
      const changeRefText = ()=>{
        refTest.value.innerText = "零零三"
      }
      return {
        refTest,
        changeRefText
      }
    }
  }
</script>

在上面这种情况,先在setup创建ref,再赋值给html的ref,操作refTest即可

通过ref调用子方法

父组件

<template>
  <div>
    <button @click="onSonFn">调用子组件方法</button>
    <button @click="getSonData">获取子组件变量</button>
    <Son ref="sonRef"></Son>
  </div>
</template>

<script>
  import {ref} from 'vue'
  import Son from "./components/Son";
  export default {
    name: 'App',
    components: {
      Son
    },
    setup(){
      const sonRef = ref(null)
      const onSonFn = ()=>{
        sonRef.value.consoleFn('零三')
      }
      const getSonData = () => {
        console.log(sonRef.value.num)
      }
      return {
        sonRef,
        onSonFn,
        getSonData
      }
    }
  }
</script>

子组件

<template>
    <div>
        <hr>
        <p>子组件 num = {{num}}</p>
    </div>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name: "Son",
        setup(){
            const num = ref(123);
            const consoleFn = (params)=>{
                console.log("触发了子方法呀!参数="+params)
            }
            return {
                consoleFn,
                num
            }
        }
    }
</script>

在 v-for 中使用

<template>
  <div>
    <div v-for="(item, i) in list" :ref="el => { divs[i] = el }" :key="i">
      {{ item }}
    </div>
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate,onMounted } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次变更之前重置引用
      onBeforeUpdate(() => {
        divs.value = []
      })
      onMounted(()=>{
        console.log(divs)
      })

      return {
        list,
        divs
      }
    }
  }
</script>

模板 ref 在 v-for 中使用 vue 没有做特殊处理,需要使用函数型的 ref(3.0 提供的新功能)来自定义处理方式

vue
vue3
  • 作者:零三(联系作者)
  • 最后更新时间:2020-10-04 21:00
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn