vue.js组件使用components

时间：2020-11-20 12:13:40 收藏：0 阅读：17

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

<template>
  <div>
    <h1>底部信息</h1>
    <div>{{copyright}}</div>
  </div>
</template>
<script>
export default {
  name: "bottom",
  props:["copyright"]
};
</script>

组件建立在components文件夹下，传值使用props，参数是数组形式。
使用主键示例：三行红色

<template>
  <div>
    <h1>首页</h1>
    <bottom copyright=‘xxxxx 2020‘></bottom>
  </div>
</template>
<script>
import bottom from ‘@/views/home/components/bottom‘
export default {
  name: "home",
  components: { bottom },
  data() {
    return {
      
    };
  }
};
</script>