vue.js组件使用components

组件路径：/views/home/components/bottom.vue 示例：

<template>
  <div>
    <h1>底部信息</h1>
    <div>{{ copyright }} <button v-on:click="setTime">更新时间</button></div>
  </div>
</template>
<script>
export default {
  name: "bottom",
  props: ["copyright"],
  data() {
    return {};
  },
  methods: {
    setTime() {
      this.$emit('TimeNow');
    },
  },
};
</script>

组件建立在components文件夹下，传值使用props，参数是数组形式，this.$emit是触发父组件的TimeNow事件，以此来调用父组件函数getTimeNow。
使用组件示例：

<template>
  <div>
    <h1>首页</h1>
    <div>时间：{{ dt }}</div>
    <bottom copyright="xxxxx 2020" v-on:TimeNow="getTimeNow"></bottom>
  </div>
</template>
<script>
import bottom from "@/views/home/components/bottom";
export default {
  name: "home",
  components: { bottom },
  data() {
    return {
      dt: null,
    };
  },
  methods: {
    getTimeNow() {
      this.dt = new Date();
    },
  },
};
</script>