Vue.js组件的构造和使用

构建组件

<template>
    <header>
        <p>欢迎大家来访！</p>
        <button class="btn-menu" v-on:click="switchMenu"><i class="iconfont">&#xe61f;</i></button>
    </header>
</template>
<script>
    module.exports = {
        data: function(){
            return {};
        },
        methods: {
          switchMenu: function(){
            this.$dispatch("switchMenu");
          }
        }
    };
</script>

使用组件

• 注册组件

  var header = require("../components/header.vue");
  var footer = require("../components/footer.vue");
  var menu = require("../components/menu.vue");
  module.exports = {
    data: function(){
        return {};
    },
    components: {
        "v-header": header,
        "v-footer": footer,
        "v-menu": menu
    }
  }
  

• 在模板中使用组件

  <template>
    <v-header>
    </v-header>
    <section class="content">
        <v-menu>
        </v-menu>
        <div class="about">
            <h2>关于我</h2>
            <p>吃货一枚呢！</p>
            <p>邮箱：<a href="mailto: [email protected]">[email protected]</a></p>
            <p>支付宝：18700917622</p>
            <p>生日：1992年2月7日</p>
        </div>
    </section>
  </template>