组件是
Vue.js 中最重要的概念之一。
组件可以让我们将 UI 拆分为独立、可复用的部件，使得代码更加清晰、易于维护。在
Vue.js 中，
组件可以分为全局
组件和局部
组件，其中全局
组件可在任何地方使用，而局部
组件只能在其父
组件中使用。
定义
组件时，需要使用
Vue.component() 方法，该方法需要传入两个参数：
组件名称和
组件配置对象。
组件名称应该采用 kebab-case（短横线分隔命名）格式，以便在 HTML 中使用。
示例代码如下：
```javascript
// 定义一个名为 button-counter 的新
组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
```
在上述代码中，我们定义了一个名为 button-counter 的
组件，该
组件包含一个计数器，每次点击按钮计数器加一。
在 HTML 中使用
组件时，需要使用
组件名称作为自定义标签来调用
组件。示例代码如下：
```html
<div id="app">
<button-counter></button-counter>
</div>
```
在上述代码中，我们调用了 button-counter
组件，并将其渲染到了 id 为 app 的 div 元素中。
除了
组件的 data 和 template 属性外，还可以使用 props 属性来传递
组件之间的数据。使用 props 时，需要在
组件的配置对象中定义 props 属性，并在 HTML 中使用 v-bind 指令来传递数据。
示例代码如下：
```javascript
// 定义一个名为 todo-item 的新
组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
// 创建一个
Vue 实例
var app = new
Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '水果' },
{ id: 2, text: '奶酪' }
]
}
})
```
在上述代码中，我们定义了一个名为 todo-item 的
组件，并使用 props 属性定义了一个名为 todo 的 prop。在 HTML 中，我们使用 v-bind 指令将 groceryList 数组中的每个对象传递给了 todo-item
组件。示例代码如下：
```html
<div id="app">
<ul>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ul>
</div>
```
在上述代码中，我们使用 v-for 指令遍历 groceryList 数组，并使用 v-bind 指令将数组中的每个对象传递给了 todo-item
组件。注意，我们还需要使用 v-bind:key 指令来为每个列表项指定一个唯一的 key 值。
插槽是
Vue.js 中另一个重要的概念。插槽可以让父
组件在子
组件中插入任意的 HTML 内容，使得
组件更加灵活、可复用。
在子
组件中，使用 <slot> 标签来定义插槽。在父
组件中，使用子
组件的自定义标签来调用
组件，并在标签内部插入 HTML 内容。示例代码如下：
```javascript
// 定义一个名为 alert-box 的新
组件
Vue.component('alert-box', {
template: `
<div class="alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
// 创建一个
Vue 实例
var app = new
Vue({
el: '#app'
})
```
在上述代码中，我们定义了一个名为 alert-box 的
组件，并在
组件中定义了一个插槽。在 HTML 中，我们调用了 alert-box
组件，并在标签内部插入了一些 HTML 内容。示例代码如下：
```html
<div id="app">
<alert-box>
<p>Something bad happened.</p>
</alert-box>
</div>
```
在上述代码中，我们调用了 alert-box
组件，并在标签内部插入了一些 HTML 内容。该 HTML 内容会被插入到 alert-box
组件的插槽中。
本文介绍如何在Vue项目中创建评分组件Rating.vue，包括从iconfont获取五角星图标，实现组件样式，并在父组件Prolist.vue中使用。通过这个过程，深入理解父子组件间的值传递。
最低0.47元/天 解锁文章
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
