Vue组件的导出和使用

组件的导出

无属性

export default {}

有属性

export default {
  name: 'HelloWorld',
  props: {
    msg: [String,Number]
  }
}

组件的导入和使用

//引入组件
import HelloWorld from '@/components/HelloWorld'
import GoodsCard from '@/components/GoodsCard'

//导出组件名
export default {
  components: {
    helloWorld: HelloWorld, //helloWorld名字自定义
    //或
    GoodsCard
  },
}

//使用
<template>
  <div>
    <helloWorld msg="嘻嘻嘻哈哈哈"></helloWorld>
    //或
    <GoodsCard></GoodsCard>
  </div>
</template>