Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
The Composition API in Vue 3.0 introduces the ref function for creating reactive references. This ref is also used to handle template references similar to the ref attribute in the Options API.
Here's a step-by-step guide on how to use the Composition API for template references:
Create a Vue component
Let's start by creating a basic Vue component with a template reference.
<template>
<div>
<input ref="myInput" type="text">
<button @click="focusInput">Focus the input</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myInput = ref(null);
const focusInput = () => {
myInput.value.focus();
}
onMounted(() => {
// You can access the input here
console.log(myInput.value);
});
return {
myInput,
focusInput
}
}
};
</script>
In the script section, we first import ref and onMounted from vue. Then inside the setup function, we declare myInput as a ref, which will hold our template reference.
We also define a focusInput function which, when called, will set the focus on our input field. The onMounted lifecycle hook is used to log the input element to the console once the component is mounted.
Access the template reference in the setup function
Inside the setup function, myInput.value will give you the actual DOM element after the component has been mounted. Be careful when accessing myInput.value outside of the onMounted or any other lifecycle hooks as it could still be null because the template hasn't been rendered and mounted to the DOM yet.
Return the template reference
Finally, we return myInput and focusInput from the setup function, so they can be used in the template. In the template, ref="myInput" creates a reference to the input element, and @click="focusInput" sets up a click event listener on the button that will call the focusInput method when the button is clicked.
Remember, ref returns a reactive and mutable object that Vue can track. When you want to access the value it holds (in this case the DOM element), you need to use .value.
Template References in Vue 3.0:
Template refs allow you to access and manipulate elements in the template.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">Hello, Vue 3.0</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myElement = ref(null);
onMounted(() => {
console.log('Element text:', myElement.value.textContent);
});
return { myElement };
},
};
</script>
Vue 3.0 Composition API and Template Refs:
Use ref from the Composition API to create template refs.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref(null);
onMounted(() => {
console.log('Element text:', myElement.value.textContent);
});
return { message, myElement };
},
};
</script>
Vue 3.0 ref() vs reactive() in Templates:
Use ref for simple reactive values and reactive for reactive objects.
Example code:
<!-- App.vue -->
<template>
<div>{{ simpleValue }}</div>
</template>
<script>
import { ref, reactive } from 'vue';
export default {
setup() {
const simpleValue = ref('Vue 3.0');
// const reactiveObject = reactive({ prop: 'Vue 3.0' });
return { simpleValue /*, reactiveObject */ };
},
};
</script>
Accessing Template Refs in Vue 3.0 setup():
Access template refs directly in the setup function.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props, { refs }) {
const message = ref('Hello, Vue 3.0');
console.log('Element text:', refs.myElement.textContent);
return { message };
},
};
</script>
Vue 3.0 Composition API with Template Refs Example:
Use template refs with the Composition API to manage state.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref(null);
onMounted(() => {
console.log('Element text:', myElement.value.textContent);
});
return { message, myElement };
},
};
</script>
Vue 3.0 Composition API and v-model with Template Refs:
Use template refs and the v-model directive with the Composition API.
Example code:
<!-- App.vue -->
<template>
<input v-model="inputValue" ref="myInput" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const inputValue = ref('');
return { inputValue };
},
};
</script>
Vue 3.0 Composition API and Template Refs for DOM Manipulation:
Utilize template refs for direct DOM manipulation.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref(null);
onMounted(() => {
myElement.value.style.color = 'blue';
});
return { message, myElement };
},
};
</script>
Vue 3.0 Composition API Template Refs Reactivity:
Template refs are reactive, triggering updates when modified.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref(null);
watch(() => {
myElement.value.style.color = 'red';
});
return { message, myElement };
},
};
</script>
Vue 3.0 Composition API and Template Refs in Functional Components:
Use template refs in functional components.
Example code:
<!-- ChildComponent.vue -->
<template functional>
<div ref="myElement">{{ props.message }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props, { refs }) {
// Access refs.myElement
return {};
},
};
</script>
Vue 3.0 Composition API Template Refs and Lifecycle Hooks:
Access template refs in lifecycle hooks for setup and cleanup.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref(null);
onMounted(() => {
console.log('Mounted');
});
onBeforeUnmount(() => {
console.log('Before Unmount');
});
return { message, myElement };
},
};
</script>
Vue 3.0 Composition API Template Refs and TypeScript:
Use TypeScript with template refs for type-checking.
Example code:
<!-- App.vue -->
<template>
<div ref="myElement">{{ message }}</div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0');
const myElement = ref<HTMLDivElement | null>(null);
onMounted(() => {
if (myElement.value) {
console.log('Element text:', myElement.value.textContent);
}
});
return { message, myElement };
},
};
</script>
Vue 3.0 Composition API Template Refs and Forms:
Use template refs to access form elements in Vue 3.0.
Example code:
<!-- App.vue -->
<template>
<form @submit.prevent="handleSubmit">
<input type="text" ref="usernameInput" />
<button type="submit">Submit</button>
</form>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const usernameInput = ref(null);
const handleSubmit = () => {
if (usernameInput.value) {
console.log('Submitted:', usernameInput.value.value);
}
};
return { usernameInput, handleSubmit };
},
};
</script>