Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。组件是Vue应用程序的基本构建块，可以被复用，降低了代码复杂性并提高了可维护性。让我们深入了解一下Vue组件的基础知识。
### 组件概念
Vue组件是可复用的代码模块，它们有自己的视图和数据逻辑。组件可以嵌套并在不同组件之间重用。每个组件都有自己的`template`、`data`、`methods`等属性，允许我们构建复杂的用户界面。
### 局部组件与全局组件
#### 局部组件
局部组件是在特定Vue实例（或父组件）中定义的，只在这个实例内部可用。定义局部组件的步骤如下：
1. **声明组件**：创建一个对象，包含组件的配置，如`template`、`data`等。
2. **挂载组件**：将组件添加到Vue实例的`components`选项中。
3. **使用组件**：在模板中通过组件标签引用它。
例如：
```javascript
var MyComponent = {
template: '<div>我是局部组件</div>',
data: function () {
return {}
}
}
new Vue({
el: '#app',
components: {
MyComponent
}
});
```
#### 全局组件
全局组件是在Vue实例创建之前，通过`Vue.component()`方法注册的，可以在整个应用中任何地方使用。注册全局组件的语法如下：
```javascript
Vue.component('my-global-component', {
template: '<div>我是全局组件</div>'
});
```
### 父子组件通信
#### 父传子
- 父组件通过`props`将数据传递给子组件，子组件通过在`props`选项中声明接收的属性。
- 在模板中，父组件通过属性绑定(`v-bind`)将数据传递给子组件。
- 子组件中可以通过`this.props`访问这些数据。
例如：
```javascript
// 父组件
<ChildComponent :parentMessage="msg"></ChildComponent>
// 子组件
Vue.component('ChildComponent', {
props: ['parentMessage'],
template: '<span>{{ parentMessage }}</span>'
});
```
#### 子传父
- 子组件通过`$emit`触发自定义事件，并可以传递参数。
- 父组件通过监听这个自定义事件来接收数据。
例如：
```javascript
// 子组件
<button @click="$emit('childEvent', 'someValue')">触发事件</button>
// 父组件
<ChildComponent @childEvent="handleChildEvent"></ChildComponent>
// 父组件的方法
methods: {
handleChildEvent(value) {
console.log(value); // 输出：'someValue'
}
}
```
### 数据传递
#### Slot分发内容
- 当需要在全局组件中动态插入内容时，可以使用`slot`。Vue的内置`slot`元素用于承载分发的内容。
- 默认插槽：不指定`name`的`slot`，用于替换组件模板中包含`<slot>`的地方。
- 具名插槽：通过`name`属性指定插槽，允许更精细的控制内容分发。
例如：
```html
<!-- 父组件 -->
<ChildComponent>
<h1 slot="header">头部</h1>
<p>主内容</p>
<footer slot="footer">底部</footer>
</ChildComponent>
<!-- 子组件 -->
<template>
<div>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
</template>
```
### 过滤器
- 过滤器用于处理数据，例如格式化货币、日期等。
- 可以在组件内声明过滤器，然后在模板中通过管道符`|`使用。
- 过滤器函数必须有返回值。
例如：
```javascript
// 定义过滤器
var Content = {
filters: {
RmbData: function (value) {
return '$' + value;
}
},
template: `
<div>
<input type="number" v-model="msg"/>
<h2>{{ msg | RmbData }}</h2>
</div>
`,
data() {
return {
msg: 10
};
}
};
```
### 生命周期
Vue组件有多个生命周期钩子，允许我们在组件的不同阶段执行逻辑。例如`created`、`mounted`、`updated`等，每个钩子都在特定的时间点执行。
例如：
```javascript
var MyComponent = {
data() {
return {
message: 'Hello'
}
},
mounted() {
console.log('组件已挂载')
},
updated() {
console.log('组件已更新')
}
}
```
以上就是Vue组件的基础知识，包括组件的概念、创建、父子组件之间的通信、数据传递以及过滤器和生命周期。理解并熟练掌握这些知识点，能够帮助开发者更好地构建Vue应用程序。
