[前端暴龙机，Vue2.x 进化 Vue3 ] Day15.组件介绍

当我们有时候某个功能的重复运用性较高，但每次都还要再写一个一模一样的功能，是不是很麻烦呢?
那麽这时我们就可以好好利用 Vue 组件的功能，可以让我们只写一次，就能直接使用很多次，举例来说，像是分页的按钮、导览列等重复运用较高的，就会写成组件

组件的基本范例

全局组件

定义在 new Vue({}) 之外

<script>
    Vue.component('component-name', {
        template: `
            // 最外层指允只一个标签
            <div>
                // 这里为刻元件长怎样的 html 架构
            </div>
        `,
        data() {
            return { }
        },
        methods:{ }
    });

    var app = new Vue({
        el: '#app',
        data: { }
    })
</script>

先从上面范例来看一下，组件的基本架构会长甚麽样子?

1. 全局组件注册的方式

透过 Vue.component(组件名称,{ }) 的方式来建立

2. 全局组件的位置

全局组件注册的位置，必需在要被使用到的 new Vue({ }) 实例 之前，如果把上面 注册component 的位置放在 new Vue({ }) 实例 之後则无法使用该组件

3. 组件的模板

在创建组件时，会有一个地方 template 用来定义组件的 html 模板该长怎麽样式，可以直接套用外面的 class
要注意，template 内只能有一个根节点，意指最外层只能有一个元素标签

4. 组件不一样的 data

组件内 data 的写法与一般我们在写的不同，必需是一个函数，这样才能让每个被使用的组件有自己独立的 data

• 一般写法

  data: {
    count: 0
  }
  

• 组件写法

  data: function () {
    return {
      count: 0
    }
  }
  

5. 组件的使用

<div id="app">
    <my-component></my-component>
</div>

把组件名称当成标签使用即可

局部组件

局部组件的注册方式如下，会直接写在Vue 的实例内

<div id="app1">
    <child-component></child-component>
</div>
<script>
    new Vue({
        el: "#app1",
        components:{
            "child-component":{
                template:"<h1>我是局部组件</h1>"
            }
        }
    });
</script>

实作一个组件吧~

来做一个简单的单纯显示各自累计 count 的组件吧

QQㄋㄟㄋㄟ好喝到咩噗茶

<script>
Vue.component("counter",{
    template:`
      <div>
        <button v-on:click='count += 1'>订购</button> {{ count }} 杯
      </div>
    `,
    data() {
      return {
        count: 0
      }
    },

});

var app = new Vue({
  el: '#app',
  data:{},
})
</script>

把我们的组件样式跟功能先写完，再来就可以直接复用组件了

<div id="app">
  <div class="flexbox">
      QQㄋㄟㄋㄟ好喝到咩噗茶 : <counter></counter>
  </div>
  <div class="flexbox">
      3P奶茶 : <counter></counter>
  </div>
  <div class="flexbox">
      奶茶三兄弟 ： <counter></counter>
  </div>
  <div class="flexbox">
      绝代双Q奶茶 ： <counter></counter>
  </div>
</div>

每一个组件的 count 就可以独立出来了，画面如下

范例展示

参考资料

Vue 官方文件
segmentfault, Vue组件之全局组件与局部组件