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