[油猴脚本开发指南]Vue组件基础
# FBI WARNING依然照抄vue文档...以后有机会会重写vue部分
# 基本示例
我们在使用createApp函数返回了一个应用示例
返回的应用示例相当于我们该项目的整体应用对象
在创建出应用示例之后，可以创建相应的组件
然后在运行的时候，在模板中使用组件
```javascript
const app = Vue.createApp({})
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
You clicked me {{ count }} times.
`
})
```
然后我们使用
```javascript
```
```js
app.mount('#components-demo')
```
组件相当于一个可复用的实例，可以使用data，computed，watch，methods，以及声明周期钩子等。
# 组件的复用
我们可以将组件任意多次的复用
```html
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
```
每一个创建的组件都是相互隔离的
# 通过prop传递数据
我们在组件中可以设置props属性，当在模板中声明该组件的时候，可以传递特定的数据
```javascript
const app = Vue.createApp({})
app.component('blog-post', {
props: ['title'],
template: `{{ title }}`
})
app.mount('#blog-post-demo')
```
使用如下
```javascript
```
也可以在v-for循环里，并且通过bind绑定来提供props数据
```javascript
const App = {
data() {
return {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
}
}
const app = Vue.createApp(App)
app.component('blog-post', {
props: ['title'],
template: `{{ title }}`
})
app.mount('#blog-posts-demo')
```
然后调用组件
```javascript
```
# 结语
依然照抄vue文档....撒花... 代码缺失了，哥哥补一补档
页:
[1]