Advanced Vue.js Component System
Advanced Vue.js Component System
Root Components
The root component is the entry point of your Vue.js application. It initializes the app and serves as the container for other components. The following example demonstrates the creation of a basic Vue app instance:
<body>
<div id="app"></div>
<script src="../js/vue3.js"></script>
<script>
let app = Vue.createApp({}) // Create a Vue instance
let vm = app.mount('#app') // Mount the root component
</script>
</body>
Global Components
Global components can be registered directly on the Vue instance. They offer:
- Convenience in usage across the entire application
- Reduction of repetitive code
However, they also come with potential drawbacks such as:
- Performance impact during initial load
- Possible naming conflicts
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="../js/vue3.js"></script>
<script>
let app = Vue.createApp({}) // Create a Vue instance
app.component('mycomponent', { // Register a global component
template: `<div>
<p>I am a global component.{{ num }}</p>
<button @click="add">Add</button>
<button @click="sub">Subtract</button>
</div>`,
data() {
return {
num: 0
}
},
methods: {
add() {
this.num++
},
sub() {
this.num--
}
}
})
let vm = app.mount('#app')
</script>
</body>
Local Components
Local components are registered within a parent component. They provide:
- Scoped functionality
- Better maintainability
- Reduced coupling between components
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {}
},
components: {
mycomponent: {
template: '<p>I am a local component</p>'
}
}
}).mount('#app')
</script>
</body>
Component Communication
Parent to Child Data Passing
Data can be passed from parent to child using props. The following example demonstrates this:
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mycomponent">
<div>
<p>I am the parent component</p>
<subcomponent msg="hello world"></subcomponent>
</div>
</template>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {}
},
components: {
mycomponent: {
template: '#mycomponent',
components: {
subcomponent: {
template: '<div>I am a child component</div>'
}
}
}
}
}).mount('#app')
</script>
</body>
Child to Parent Data Passing
Children can emit events to notify parents of changes. Here's an example:
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mycomponent">
<div>
<p>Parent component receives child message: {{ChildValue}}</p>
<subcomponent msg="hello world" @childmsg="handleMessage"></subcomponent>
</div>
</template>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
ChildValue: ''
}
},
methods: {
handleMessage(value) {
this.ChildValue = value
}
},
components: {
mycomponent: {
template: '#mycomponent',
components: {
subcomponent: {
template: `<div>
I am a child component
<button @click="sendMessage">Send Message</button>
</div>`,
props: ['msg'],
methods: {
sendMessage() {
this.$emit('childmsg', 'Message from child')
}
}
}
}
}
}
}).mount('#app')
</script>
</body>
Advanced Patterns
Dynamic Components
Dynamic components allow you to switch components based on data. Here's how to implement it:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<h3>Parent Component</h3>
<component :is="currentComponent"></component>
<button @click="switchComponent">Switch Component</button>
</div>
</template>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
currentComponent: 'son1'
}
},
components: {
father: {
template: '#father',
components: {
son1: {
template: '<div>Child Component 1</div>'
},
son2: {
template: '<div>Child Component 2</div>'
}
},
methods: {
switchComponent() {
this.currentComponent = this.currentComponent === 'son1' ? 'son2' : 'son1'
}
}
}
}
}).mount('#app')
</script>
</body>
Async Components
Async components load their code on demand. This improves app performance by deferring non-critical assets:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<h3>Parent Component</h3>
