vue3中ref的使用

一.定义一个数据的响应式

<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
  ref
} from 'vue'
export default {
  setup () {
    // 定义响应式数据 ref对象
    const count = ref(1)
    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }
    return {
      count,
      update
    }
  }
}
</script>

二.ref获取元素

获取子组件的值

//Home.vue
<template>
  <div>
  <button @cilck="show"><button>
  <Dialog ref="dialog"></Dialog>
  </div>
</template>

<script>
import { reactive, toRefs,ref } from "vue";
import Dialog from "../components/Dialog.vue";
export default {
  components: {
    Dialog,
  },
  setup() {
    const state = reactive({
      count: 0,
    });
     
     const dialog=ref(null);//不要忘记return出去，要么获取不到值
     //显示子组件
    const show = () => {
    //调用dialog组件里面的showDialog方法
      dialog.value.showDialog();
      //dialog.value.show=true;不能自己修改组件里面的值
      console.log(dialog.value)
    };

    return {
      ...toRefs(state),
      show,
      dialog
    };
  },
};
</script>

<style lang="scss" scoped></style>

//子组件Dialog.vue
<template>
  <div>
    <div class="content" v-if="show">{{ count }}</div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    const show = ref(false);
    const showDialog = () => {
      show.value = true;
    };
    const fadeDialog=()=>{
      show.value=false;}
    return {
      ...toRefs(state),
      show,
      showDialog,
      fadeDialog
    };
  },
};
</script>
<style lang="scss" scoped></style>

打印dialog.value的结果如下图

获取标签元素

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="scss" scoped>
import { onMounted, ref } from 'vue'
/* 
功能需求: 让输入框自动获取焦点
*/
export default {
  setup() {
    const inputRef = ref(null)
    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>