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

<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>