56 lines
1.7 KiB
Markdown
56 lines
1.7 KiB
Markdown
|
- 因为组件是可复用的 Vue 实例，所以它们与 `new Vue` 接收相同的选项，例如 `data`、`computed`、`watch`、`methods` 以及生命周期钩子等。仅有的例外是像 `el` 这样根实例特有的选项。
|
|||
|
|
- 一个组件的 `data` 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
|
|||
|
|
- 通过prop向组件传递数据，`v-on` 监听子组件实例的任意事件
|
|||
|
|
- [从一个 API 获取博文列表](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example)
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// 定义一个名为 button-counter 的新组件
|
|||
|
|
Vue.component('button-counter', {
|
|||
|
|
data: function () {
|
|||
|
|
return {
|
|||
|
|
count: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
Vue.component('blog-post', {
|
|||
|
|
props: ['title'],
|
|||
|
|
template: '<h3>{{ title }}</h3>'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div id="components-demo">
|
|||
|
|
<button-counter></button-counter>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<blog-post title="My journey with Vue"></blog-post>
|
|||
|
|
<blog-post title="Blogging with Vue"></blog-post>
|
|||
|
|
<blog-post title="Why Vue is so fun"></blog-post>
|
|||
|
|
|
|||
|
|
<blog-post
|
|||
|
|
v-for="post in posts"
|
|||
|
|
v-bind:key="post.id"
|
|||
|
|
v-bind:title="post.title"
|
|||
|
|
></blog-post>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
new Vue({ el: '#components-demo' })
|
|||
|
|
|
|||
|
|
new Vue({
|
|||
|
|
el: '#blog-post-demo',
|
|||
|
|
data: {
|
|||
|
|
posts: [
|
|||
|
|
{ id: 1, title: 'My journey with Vue' },
|
|||
|
|
{ id: 2, title: 'Blogging with Vue' },
|
|||
|
|
{ id: 3, title: 'Why Vue is so fun' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## [动态组件](https://cn.vuejs.org/v2/guide/components.html#动态组件)
|
|||
|
|
|
|||
|
|
https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components
|