component.png

這篇文章主要簡單的講一下vue組件：

-1- vue 組件分為全局組件和局部組件，我們先來說一下全局組件：

const Vue = require('vue')  // 引入Vue
require('./css/style.css')  // 引入全局css
require('./component.js')(Vue)  //組件
require('./index.js')(Vue)  // 首頁js

這里我把組件都放在component.js里面了，將js引進來，然后開始寫組件：

首先需要先寫一個Vue實例：

// 創建top組件實例
let top = new Vue({
  el: '#top',
  data:{

    topshow:false

  }
})

這里data.topshow是控制top組件里的一個點擊事件的，這里暫時不說了。

注冊組件：

// 注冊組件
Vue.component("my-top",{
    template: '<div class="top-bar"><a class="left">![](./app/img/home.png)</a><p>{{page}}</p><a class="right" v-on:click="topFun">![](./app/img/other.png)</a></div>',
    data:function(){

        return data;

    },methods:{
        topFun:function(){
            top.topshow = !top.topshow;
        }
    }
})

my-top的template為組件的顯示的頁面結構。
data為組件所需的數據，這里的data是一個函數，注意要和Vue實例的data作區分。
methods是定義的組件的方法。

然后在需要用這個組件的地方引入這個組件就可以了：

<div v-cloak id="top" class="top">
    <my-top></my-top>

    <div class="top-cont" v-show = "topshow">
        <ul>
          <li>
            <p>![](./app/img/icon1.png)</p>
            <p>消息</p>
          </li>
          <li>
            <p>![](./app/img/icon2.png)</p>
            <p>航班</p>
          </li>
          <li>
            <p>![](./app/img/icon3.png)</p>
            <p>旅行</p>
          </li>
          <li>
            <p>![](./app/img/icon4.png)</p>
            <p>錢包</p>
          </li>
          <li>
            <p>![](./app/img/icon5.png)</p>
            <p>喜歡</p>
          </li>
          <li>
            <p>![](./app/img/icon6.png)</p>
            <p>酒店</p>
          </li>
        </ul>
    </div>
</div>

這樣全局組件就算完成了

-2- 全局組件說完咱再說說局部組件：

局部組件其實大同小異，簡單說就是在Vue實例里面注冊的組件就是局部組件：

我在首頁index.js 里面注冊了一個 my-banner組件

module.exports = function(Vue){

require('./css/index.css')

let banner = {
    template:"<div class='banner-box'>![](./app/img/img1.png)</div>"
} 

let v = new Vue({
    el: '#box',
    data: {
      
    },
    components:{
       'my-banner':banner   
    }
})

}

好了，組件說了這么多來看看最終的效果吧？

vue組件

左側的other按鈕我給加了個點擊事件，這里就不再多說vue的指令看官方文檔吧！

vue官方文檔：https://cn.vuejs.org/v2/guide/
阿里巴巴矢量圖標庫：http://www.iconfont.cn/

項目地址：https://github.com/wangbaogui123/webpack2-vue2/tree/w-v1.02
? 著作權歸作者所有
文／奔跑的攻城獅（簡書作者）
原文鏈接：http://www.lxweimin.com/p/82e964996238
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。

上一篇：http://www.lxweimin.com/p/468a69ac2fc4