vue3中ref的使用
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>
更多推荐
已为社区贡献1条内容
所有评论(0)