Vue的组件封装

最新推荐文章于 2024-01-06 17:12:29 发布

原创最新推荐文章于 2024-01-06 17:12:29 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #组件的封装

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue中进行全局组件的封装，通过具体示例展示了如何使用Vue.component方法创建可复用的组件，包括数据绑定、方法定义等关键步骤。

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

1. 全局组件封装:

Vue.component(" 组件名 ",{
     template:`HTML片段`, //代替了以前的el
    //<button>-</button><span>{{n}}</span><button>+<bu
     data:function(){
       return {//相当于以前的data
         n:1
       }
     },

2 下面来个例子，让我们更好的熟悉Vue

Vue.component("my-counter",{   template:`<div>
    <button @click="sub">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>   </div>`,  
    data:function(){
    return { n:1 }   }, 
    methods:{
    sub(){ this.n--; },
    add(){ this.n++; }  } })