局部组件
📌全局注册往往是不够理想的。比如，如果你使用一个像
webpack这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的JavaScript的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
<!DOCTYPE html>
<html>
<head>
<title>Vue Local Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 定义一个简单的局部组件
const LocalComponent = {
template: '<div class="local-component">{{ message }}</div>',
data() {
return {
message: 'Hello from LocalComponent!'
};
}
};
// 创建 Vue 实例，并在组件选项中注册局部组件
new Vue({
el: '#app',
components: {
'local-component': LocalComponent
},
template: `
<div>
<h1>Hello from Parent Component!</h1>
<local-component></local-component>
</div>
`
});
</script>
</body>
</html>
只在某个组件内部使用的组件，可以直接在 components 选项中注册。例如：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
📌谁注册谁使用（从属关系）
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
注意局部注册的组件在其子组件中_不可用_。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
步骤
- 定义组件：定义一个包含组件配置的对象。创建组件结构
template,创建组件实例const - 在父组件中注册组件：在父组件的
components选项中注册该组件。 - 在模板中使用组件：在父组件的模板中使用定义好的局部组件。
<body>
<div id="app">
{{msg}}
<!-- 4.使用组件 -->
<my-com></my-com>
</div>
</body>
<script src="libs/vue.js"></script>
<!-- 1.创建组件模板 -->
<template id="temp">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
// 2.定义组件
const com = {
template: "#temp",
data() {
return {
msg: "helle temp 3"
}
}
}
new Vue({
el: "#app",
data: {
msg: "hello vue"
},
components: {
// 3.注册局部组件，谁注册谁使用！
"my-com": com,
}
})
</script>
动态
<!DOCTYPE html>
<html>
<head>
<title>Vue Dynamic Local Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 定义两个局部组件
const ComponentA = {
template: '<div class="component-a">Hello from Component A</div>'
};
const ComponentB = {
template: '<div class="component-b">Hello from Component B</div>'
};
// 创建 Vue 实例
new Vue({
el: '#app',
data: {
currentComponent: 'component-a'
},
components: {
'component-a': ComponentA,
'component-b': ComponentB
},
template: `
<div>
<h1>Dynamic Local Component</h1>
<button @click="switchComponent">Switch Component</button>
<component :is="currentComponent"></component>
</div>
`,
methods: {
switchComponent() {
this.currentComponent = this.currentComponent === 'component-a' ? 'component-b' : 'component-a';
}
}
});
</script>
</body>
</html>
场景
- 局部功能模块：适用于在特定页面或功能模块中使用的组件。
- 父子组件通信：当组件只在父组件或某个特定的组件树中使用时，可以作为局部组件注册。
- 避免全局污染：防止全局注册的组件过多，导致命名冲突和管理困难。
优点
- 避免全局命名冲突：局部组件只在父组件的上下文中可用，不会污染全局命名空间。
- 提高代码可读性：将组件限制在使用它们的上下文中，代码更易读和理解。
- 易于调试：局部组件的作用范围明确，更容易定位和修复问题。
- 模块化开发：支持将不同功能模块化，提高代码的复用性和维护性
![[巨详细]安装HBuilder-X教程](https://img-blog.csdnimg.cn/b161eb27bad34615904c5600b4108e58.gif#pic_center)
