vue 组件，以及组件的复用

Posted 2022-05-23 xxflz

有时候代码的某一模块可能会经常使用到，那么完全可以把这一模块抽取出来，封装为一个组件，哪里需要用到的时候只需把模块调用即可 。参考vue官方 https://cn.vuejs.org/v2/guide/components.html

这里用一段代码

<div id="components-demo">
   <button v-on:click="count++">You clicked me  count  times.</button>
</div>

因为这个点击按钮button会经常被用到，所以在这里要把这个button模块给抽取出来，做为一个组件

组件抽取

例：

// 定义一个名为 button-counter 的新组件
Vue.component(‘button-counter‘, 
  data: function () 
    return 
      count: 0
    
  ,
  template: ‘<button v-on:click="count++">You clicked me  count  times.</button>‘
)

复用组件

例：

<div id="components-demo">
  <button-counter></button-counter>
</div>

ok！完事儿