组件路径：/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',{'name':'china'});
    },
  },
};
</script>

<template>
  <div>
    <h1>首页</h1>
    <div>时间：{{tz}}-{{ 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,tz:''
    };
  },
  methods: {
    getTimeNow(timeZone) {
      this.dt = new Date();this.tz=timeZone.name;
    },
  },
};
</script>

• 本文标题： Vue如何将页面组件化，如同aspx里面的用户控件，随意调用
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：SSL证书下载下来如何部署到服务器
• 下一篇： NETCore 分词实现，一句话分成N个关键词