vue 自定义组件使用

1创建自定义组件

// A Vue Component
<template>
  <div  class="page__ft"
        :class="{j_bottom:set_bottom}">
        <a href="javascript:home()">
          <img src="@/assets/icon_footer_link.png" /> Footer | is here!
        </a>
      </div>
</template>
<script>
export default {
  name: "Footer",
  props: {
    set_bottom: Boolean
  }
};
</script>

2在父组件中导入

import Footer from "@/components/Footer.vue";
export default {
  components: {
     Footer
  },

3使用

// 如果子组件的prop定义为Boolen,父组件使用时,如果为true,写法为
 <Footer set_bottom/>
 //如果为false,写法为
  <Footer />