vue 组件篇

最新推荐文章于 2025-02-06 18:13:43 发布

原创最新推荐文章于 2025-02-06 18:13:43 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue组件

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue.js中组件的基本示例与参数传递方法。通过具体代码示例，展示了如何创建可复用的组件，以及如何通过属性进行个性化配置。这对于理解和应用Vue.js的组件系统非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本示例

// 声明一个组件
Vue.component('button-counter', {
              // 调用组件的标签名
  data: function () {
    return {
      count: 0
    }  // ====  data:{ count:0 }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  // 组件模型
})

可以重复调用，各自的count都是独立的变量

组件的参数

调用组件是采用标签属性的方式进行参数传值

<body>
    <!-- 参数 -->
<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>

<script>
    Vue.component('blog-post', {
    props: ['title'], // 调用参数
    template: '<h3>{{ title }}</h3>'  // 调用参数
    })
</script>
</body>