###
Vue 自定义组件的创建与使用
在
Vue 中，
自定义组件是一种非常强大的功能，它允许开发者将界面拆分为独立、可复用的部分。以下是如何创建和使用
Vue 自定义组件的详细说明。
#### 1. 创建
自定义组件
Vue 自定义组件可以通过 `
Vue.component` 方法全局注册，或者通过 `components` 选项局部注册。下面是一个简单的示例，展示如何创建一个名为 `my
-component` 的
自定义组件：
```javascript
// 全局注册
组件
Vue.component('my
-component', {
template: '<div>A custom component!</div>'
});
```
如果需要局部注册
组件，则可以在某个
Vue 实例中定义：
```javascript
new
Vue({
el: '#app',
components: {
'local
-component': {
template: '<div>A local component!</div>'
}
}
});
```
#### 2. 使用
自定义组件
创建好
组件后，可以直接在模板中使用其标签名。例如，对于上面的全局
组件 `my
-component` 和局部
组件 `local
-component`，可以这样使用：
```html
<div id="app">
<my
-component></my
-component>
<local
-component></local
-component>
</div>
```
#### 3.
组件间通信
为了实现父子
组件之间的数据传递，
Vue 提供了 `props` 和 `events` 机制。父
组件可以通过 `props` 向子
组件传递数据，而子
组件可以通过 `$emit` 触发事件来通知父
组件。
**父
组件向子
组件传递数据：**
```javascript
Vue.component('child
-component', {
props: ['message'], // 定义接收的 prop
template: '<div>{{ message }}</div>'
});
new
Vue({
el: '#app',
data: {
parentMessage: 'Hello from parent!'
}
});
```
```html
<child
-component :message="parentMessage"></child
-component>
```
**子
组件向父
组件发送事件：**
```javascript
Vue.component('child
-component', {
methods: {
notifyParent() {
this.$emit('custom
-event', 'Hello from child!');
}
},
template: '<button @click="notifyParent">Notify Parent</button>'
});
new
Vue({
el: '#app',
methods: {
handleEvent(data) {
console.log(data); // 输出 "Hello from child!"
}
}
});
```
```html
<child
-component @custom
-event="handleEvent"></child
-component>
```
#### 4.
自定义组件中的 v
-model 支持
为了让
自定义组件支持 `v
-model`，需要定义 `model` 属性，并通过 `$emit` 更新父
组件的绑定值[^1]。
```javascript
Vue.component('custom
-input', {
model: {
prop: 'value',
event: 'input'
},
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
/>
`
});
```
```html
<custom
-input v
-model="parentValue"></custom
-input>
```
#### 5. 动态
组件
Vue 还支持动态
组件的使用，通过 `<component>` 标签和 `is` 属性实现。
```javascript
new
Vue({
el: '#app',
data: {
currentComponent: 'component
-a'
},
components: {
'component
-a': { template: '<div>Component A</div>' },
'component
-b': { template: '<div>Component B</div>' }
}
});
```
```html
<component :is="currentComponent"></component>
<button @click="currentComponent = 'component
-b'">Switch to B</button>
```
---
本文介绍了一个简单的Vue组件创建流程，包括在components文件夹下新建文件夹，并创建index.js及.vue文件，随后在index.js中进行配置，并在main.js中引入所创建的组件。
扫一扫
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
