[油猴脚本开发指南]Vue组件基础

李恒道

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文档....撒花...

王一之

代码缺失了，哥哥补一补档