YouTip{{ message }}
{{ message }}
Vue Component Instance
In Vue.js, component instances are one of the most basic building blocks in Vue applications. Each component instance is a Vue component that has its own template, data, methods, and lifecycle hooks, and can independently manage its own state and behavior. The following is a detailed introduction to Vue component instances:
## Creating Vue Component Instances
In Vue.js, creating a component instance is usually done through the createApp method and the component options object.
The component options object can include the following properties:
* **`data`**: Data object, used to store component's reactive data.
* **`props`**: Property array or object, used to receive data passed from parent component.
* **`computed`**: Computed property object, dynamically calculated based on reactive dependencies.
* **`methods`**: Methods object, contains internal functions and operations of the component.
* **`watch`**: Watcher object, used to listen for data changes and respond.
* **`template`**: String, defines the component's template structure.
* **`render`**: Function, used to render component's virtual DOM.
* **`setup`**: Function, used to set component's initial state, data, computed properties, and watchers (in Vue 3).
The following is a simple example of a Vue component instance:
## Example
import{ createApp } from 'vue';
const app = createApp({
data(){
return{
message:'Hello, Vue!'
};
},
methods:{
greet(){
alert(this.message);
}
},
template: `
`
});
app.mount('#app');
**Explanation:**
* The `data` function returns an object containing the `message` property, which is used to store the component's state.
* The `methods` object contains a `greet` method, which displays the content of `message` in an alert box when the button is clicked.
* The `template` string defines the component's template structure, using interpolation and event binding to implement data display and interaction.
### Lifecycle Hooks
Vue component instances have some lifecycle hook functions that allow developers to execute custom logic at different stages of the component's lifecycle. Common lifecycle hooks include `created`, `mounted`, `updated`, and `destroyed`.
## Example
const app = createApp({
data(){
return{
message:'Hello, Vue!'
};
},
created(){
console.log('Component created');
},
mounted(){
console.log('Component mounted');
},
updated(){
console.log('Component updated');
},
destroyed(){
console.log('Component destroyed');
},
template: `
`
});
## Component Communication
Vue component instances communicate through props, events, provide/inject, $parent/$children, $attrs/$listeners, etc., depending on the component relationships and requirements. These mechanisms allow components to pass data and respond to user interactions across different levels.
* * *
## Component Instance Properties
### $data
The $data property contains all data properties of the component instance. It is reactive, meaning when data changes, the related views will automatically update.
## Example
const app = Vue.createApp({
data(){
return{
message:'Hello, Vue!'
};
}
});
const vm = app.mount('#app');
console.log(vm.$data);// { message: 'Hello, Vue!' }
### $props
The $props property contains all properties (props) received from the parent component. It is read-only.
## Example
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Message from parent'
};
}
};
## Example
// ChildComponent.vue
export default{
props:['message'],
mounted(){
console.log(this.$props.message);// 'Message from parent'
}
};
### $refs
$refs contains all DOM elements or child component instances that have the ref attribute inside the component. You can use $refs to access these elements or component instances.
## Example
export default {
mounted() {
console.log(this.$