vue组件开发

局部组件

import component1 from '../component/zl-header';
export default {
  name: "twoWeekReport",
  components: {
    component1
  },
};

全局组件

import component1 from './component/zl-header.vue';
Vue.component('component1',component1)

动态组件

 <component :is="wode"></component>

import component1 from '../component/zl-header';
export default {
  name: "twoWeekReport",
  data() {
    return {
      wode: 'component1'
    }
  },
  components: {
    component1
  }
};

props $emit

// 子组件
<template>
  <div class="zl-header" @click="a('点击事件')">
    我是一个组件{{title}}{{content}}
  </div>
</template>

<script>
export default {
  name: "zl-header",
  props: {
    title: {
      type: String,
      required: true
    },
    content: String
  },
  methods: {
    a(data) {
      this.$emit('showTitle',data)
    }
  }
};
</script>

//父组件
<template>
  <div class="zl-test">
    <zlHeader title="标题" content="内容" @showTitle="b"></zlHeader>
  </div>
</template>
<script>
import zlHeader from "../component/zl-header";
export default {
  name: "zl-test",
  components: {
    zlHeader
  },
  methods: {
    b(data) {
      console.log(data);
    }
  }
};
</script>

一个简单的头部组件

<template>
  <header class="zl-header" :class="{'fixed': fixed}">
    <div style="float:left">
      <slot name="left"></slot>
    </div>
    <h1 style="display:inline-block;">{{title}}</h1>
    <div style="float:right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<script>
/**
 * zl-header
 * @module components/header
 * @param {string} [title]
 * @param {boolean} [fixed]
 * @param {solt} [left]
 * @param {solt} [right]
 *
 * @example
 * <zlHeader title="标题" fixed>
      <div slot="left">left</div>
      <span slot="right">right</span>
      <span></span>
    </zlHeader>
 */
export default {
  name: "zl-header",
  props: {
    title: {
      type: String,
      required: true
    },
    fixed: Boolean
  }
};
</script>
<style lang="scss">
.zl-header {
  height: 40px;
  background: blue;
  width: 100%;
}
.fixed {
  position: fixed;
}
</style>