What is ref?
- Generate responsive data of value type
- Available for templates and reactive
- Modify the value through .value
- You can get DOM elements
<p ref=”elemRef”>{{nameRef}} -- {{}}</p>
// Get the dom element
onMounted(()=>{ (); });
What is toRef?
- Prop attributes for a reactive object (reactive encapsulation)!!!
- Create a ref with responsiveness
- Maintain a reference relationship between the two
What is toRefs?
- Convert reactive objects (reactive encapsulation) to normal objects
- Each prop property of the object is the corresponding ref
- Maintain a reference relationship between the two
Best way to use
- Reactive as the object's responsive, ref as the value type responsive
- To deconstruct responsive objects, you need to use toRefs(state), you only need to obtain a single responsive value type to use toRef(state, ‘xxx’);
- Ref variable naming is used with xxRef
- When the synthesis function returns a responsive object, use toRefs (usexx hook function);
Example of usage:
1. Subcomponents, script tags are written in this way: <script setup lang="ts">
<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// Parent component passes data:msg="xxx"defineProps({
msg: String
});
// The child component notifies the parent component to use @onSayHello="xxx", when the child component needs to be used eg: emits('onSayHello', 'hello ah ah ah')interface IEmits {
(e: 'onSayHello', arg1: String): void;
}
const emites = defineEmits<IEmits>();
const state = reactive({
name: 'alice',
age: 20,
sex: 'female'
});
// Use the object obtained by toRefs to further deconstruct and obtain reactive value type variableconst stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// Use toRef to obtain a certain attribute value, and it has responsiveconst sexRef = toRef(state, 'sex')
const sayHello2 = () => {
= 'Hello!'
emites('onSayHello', 'hello-----')
}
// = ??? Suitable for reactive encapsulation of reactive objectsconst updateState = () => {
= 'Shuangshuang';
= 22;
= 'male';
// Or find the responsive value type and use .value to modify it // = 'Shuangshuang' // = 22
// = 'Male'}
// ref value type, use .value to modifyconst updateRef = () => {
= 'hello!'
}
const msgRef = ref('Value Type');
</script>
<template>
<h1>{{ msg }}</h1>
<h1>{{ msgRef }}, My name is:{{ nameRef }}, age:{{ ageRef }}, gender:{{ sexRef }}</h1>
<button @click="sayHello2">greet</button>
<button @click="updateState">Modify the name,age,gender</button>
<button @click="updateRef">用英文greet</button>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
button {
margin: 10px;
}
</style>2. Subcomponents, script tags are written in this way: <script>
<script>
import { ref, reactive, toRef, toRefs } from 'vue'
export default {
props: {
msg: String
},
emits: ['onSayHello'],
setup(props, { emit }) {
(props); // Data transmitted from the parent component const state = reactive({
name: 'alice',
age: 20,
sex: 1
});
// Use the object obtained by toRefs to further deconstruct and obtain reactive value type variable const stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// Use toRef to obtain a certain attribute value, and it has responsive const sexRef = toRef(state, 'sex')
const sayHello2 = () => {
= 'hello, hello!'
emit('onSayHello', 'hello-----')
}
// = ??? Suitable for reactive encapsulation of reactive objects const updateState = () => {
= 'Shuangshuang';
= 22;
= 0;
}
// ref value type, use .value to modify const updateRef = () => {
= 'hello!'
= 33
= 'male'
}
const msgRef = ref('Value Type');
// Pay attention to returning what needs to be used for templates such as variables and methods, otherwise the page will not be rendered return {
msgRef,
sayHello2,
nameRef,
ageRef,
sexRef,
updateState,
updateRef,
}
}
}
</script>
<template>
<h1>{{ msgRef }}, My name is:{{ nameRef }}, age:{{ ageRef }}, gender:{{ sexRef }}</h1>
<button @click="sayHello2">say hello</button>
<button @click="updateState">RevisestateValue of</button>
<button @click="updateRef">ReviserefValue of</button>
</template>
<style scoped>
button {
margin: 10px;
}
</style>Parent component:
<script setup>
import HelloWorld from './components/'
function onSayHello(a) {
(a)
}
</script>
<template>
<HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template>
<style scoped>
.:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>This is the article about vue3 father-son communication + ref, toRef, toRef, toRefs usage examples. For more related content on vue3 ref toRefs usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!