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
In Vue 3, you can use template references to access DOM elements or child components directly. Template references are primarily used when you need to manipulate the DOM directly or access methods or data from child components.
Here's how you can create a template reference in Vue 3:
<template>
<button ref="myButton">Click me!</button>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myButton = ref(null);
onMounted(() => {
console.log(myButton.value); // Logs the button element
});
return {
myButton
}
},
}
</script>
In the example above, ref="myButton" in the template creates a reference to the button element. In the script, we declare myButton as a ref, which is initially null.
When the component is mounted, myButton.value will be the actual button element, because Vue automatically assigns the DOM element to myButton.
We're logging the value of myButton in the onMounted hook, which is a lifecycle hook that runs after the component is added to the DOM. Note that myButton is a reactive ref, so you need to use .value to access its value.
You can also create template references to child components:
<template>
<my-child-component ref="myChild"></my-child-component>
</template>
<script>
import { ref, onMounted } from 'vue';
import MyChildComponent from './MyChildComponent.vue';
export default {
components: {
MyChildComponent
},
setup() {
const myChild = ref(null);
onMounted(() => {
console.log(myChild.value); // Logs the child component instance
});
return {
myChild
}
},
}
</script>
In this case, myChild.value will be the instance of MyChildComponent, so you can access its methods and data directly.
While template references can be useful, they should be used sparingly. Vue's reactivity system is usually a better approach for most tasks. However, there are some cases, like focusing on an input element or calling a method on a child component, where template references can be the right tool for the job.
Vue 3.0 ref Attribute in Templates:
ref attribute to create a template reference that can be used to access the underlying DOM element or Vue component.<template>
<div ref="myElement">Reference Me!</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myElement); // Access the DOM element
},
};
</script>
Template References for DOM Manipulation in Vue 3.0:
<template>
<button ref="myButton" @click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$refs.myButton.disabled = true; // Manipulate the DOM directly
},
},
};
</script>
Vue 3.0 Template Reference and Component Communication:
<!-- ParentComponent.vue -->
<template>
<child-component ref="myChild"></child-component>
</template>
<script>
export default {
mounted() {
this.$refs.myChild.doSomething(); // Access a method in the child component
},
};
</script>
<!-- ChildComponent.vue -->
<script>
export default {
methods: {
doSomething() {
// Do something in the child component
},
},
};
</script>
Vue 3.0 Template Reference and Reactivity:
<template>
<input ref="myInput" v-model="message" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('');
return {
message,
};
},
mounted() {
console.log(this.$refs.myInput.value); // Access reactive data via template reference
},
};
</script>
Accessing Template References in Vue 3.0 Methods:
<template>
<div ref="myDiv" @click="handleClick">Click Me</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$refs.myDiv.style.backgroundColor = 'blue'; // Access template reference in a method
},
},
};
</script>
Vue 3.0 Template Reference and Reactive Data:
<template>
<p ref="myParagraph">{{ message }}</p>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue!');
return {
message,
};
},
updated() {
console.log(this.$refs.myParagraph.innerText); // React to reactive data changes
},
};
</script>
Vue 3.0 Template Reference and Lifecycle Hooks:
<template>
<div ref="myElement">Reference Me!</div>
</template>
<script>
export default {
created() {
console.log('Component Created');
},
updated() {
console.log('Component Updated');
},
destroyed() {
console.log('Component Destroyed');
},
};
</script>
Vue 3.0 Template Reference with v-for:
v-for for dynamic rendering.<template>
<div v-for="item in items" :key="item.id" ref="myElements">
{{ item.text }}
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
],
};
},
mounted() {
console.log(this.$refs.myElements); // Access an array of elements
},
};
</script>
Dynamic Template References in Vue 3.0:
<template>
<div v-if="showElement" ref="myDynamicElement">Dynamic Reference</div>
</template>
<script>
export default {
data() {
return {
showElement: true,
};
},
methods: {
toggleElement() {
this.showElement = !this.showElement;
},
},
};
</script>
Vue 3.0 Template Reference and Form Handling:
<template>
<form ref="myForm" @submit.prevent="handleSubmit">
<!-- Form fields go here -->
</form>
</template>
<script>
export default {
methods: {
handleSubmit() {
console.log('Form submitted');
console.log(this.$refs.myForm); // Access the form reference
},
},
};
</script>
Vue 3.0 Template Reference and Event Handling:
<template>
<button ref="myButton" @click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
console.log(this.$refs.myButton); // Access the button reference
},
},
};
</script>