vue2———组件
一个简单的组件
组件进行注册并使用
结果：
在进行对组件的学习时遇见一些问题：
1、组件的命名
解决方法：
组件的命名
Vue.js 组件的命名遵循一些最佳实践，这些实践有助于保持代码的清晰和一致性。
-
多单词命名：Vue 官方推荐组件名应该总是多单词的，以防止与现有的 HTML 元素或未来的 HTML 元素冲突。这可以通过短横线分隔（kebab-case）或驼峰式命名（PascalCase，但在模板中需要使用短横线分隔）来实现。
-
短横线分隔（kebab-case）：在
.vue文件名、组件注册名（局部或全局）以及模板中使用时，都使用短横线分隔。例如，my-component.vue和<my-component />。 -
驼峰式命名（PascalCase）：在 JavaScript 中注册组件时可以使用驼峰式命名，但在模板中引用时仍需使用短横线分隔的形式。Vue 模板编译器会自动将短横线分隔的组件名转换为对应的驼峰式命名，以便在 JavaScript 中引用。
-
-
避免与 HTML 元素冲突：确保你的组件名不会与现有的 HTML 元素或未来的 HTML 元素冲突。
-
明确意图：组件名应该能够清晰地表达组件的用途或功能。
2、对组件注册后的使用
首先先调用一下，import xxx from xxx
注意：from的地址需要注意在同一目录（eg：
）
之后注册在components中，
然后在template中v-bind也就是 :...
Vue.js 2.x 中的组件是构建用户界面的可复用元素。它们可以包含自己的模板、逻辑（JavaScript）和样式（CSS），并且可以接收外部传入的数据（通过 props）以及向外部发送事件（通过 events）。组件的使用极大地提高了代码的可复用性、可维护性和组织性。下面我将详细讲解 Vue 2.x 中的组件的几个方面。
1. 组件的注册
Vue 组件有两种注册方式：全局注册和局部注册。
- 全局注册：注册的组件可以在任何新创建的 Vue 根实例的模板中使用。
Vue.component('my-component', {
// 选项...
})- 局部注册：注册的组件只能在注册它的实例/组件的模板中使用。
var Child = {
// 选项...
}
new Vue({
el: '#app',
components: {
'my-component': Child
}
})2. 组件的选项
Vue 组件包含一系列的选项，这些选项定义了组件的行为和外观。
- data：组件的数据对象。Vue 会将 data 对象的属性加入到组件的响应式系统中。
- props：一个包含属性名称和配置的数组或对象，用于接收来自父组件的数据。
- computed：计算属性，基于它们的响应式依赖进行缓存。只有当相关响应式依赖发生改变时，它们才会重新求值。
- methods：组件的方法，可以在模板或其他方法中被调用。
- watch：一个对象，键是需要观察的表达式，值是对应回调函数。当表达式的值变化时，会调用对应的回调函数。
- template：一个字符串模板，作为组件的 HTML 模板。
- mounted、updated 等：生命周期钩子，用于在组件的不同阶段执行代码。
3. 组件的模板
Vue 组件的模板定义了组件的 HTML 结构。模板可以是字符串，也可以是单文件组件中的 .vue 文件中的 <template> 部分。模板可以包含普通的 HTML、文本、指令、插值表达式等。
4. 组件的通信
Vue 组件之间的通信主要有以下几种方式：
- Props 向下传递：父组件通过 props 向下传递数据给子组件。
- 事件向上传递：子组件通过
$emit触发事件，向父组件发送消息。 - 插槽（Slots）：允许父组件在子组件的模板中插入额外的 HTML 内容。
- 全局事件总线（不推荐在大型应用中使用）：通过 Vue 实例作为事件中心，实现跨组件通信。
- Vuex：对于复杂的应用，推荐使用 Vuex 进行状态管理，实现跨组件的通信和状态共享。
5. 组件的复用
Vue 组件的最大优点之一就是可复用性。通过注册和使用组件，可以构建出复杂的用户界面，同时保持代码的清晰和可维护性。