import 引入vue 组件命名规则。vue引入自定义的组件

端午节快乐~

其实就是两种方法：

第一种就是完全按照组件的名字去使用

<template>
   <MainLayout>
     <p>我是新闻</p>
   </MainLayout>
</template>

<script>
import MainLayout from '../layouts/Main.vue'

export default {
   components: {
      MainLayout
   }
}
</script>

比如这里引用的组件名是MainLayout上面也用MainLayout作为标签使用。

第二种：就是每个大写字母之间使用-隔开

比如：

<template>
   <Main-Layout>
      <p>我是新闻</p>
   </Main-Layout>
</template>

<script>
import MainLayout from '../layouts/Main.vue'

export default {
   components: {
      MainLayout
   }
}
</script>

为了证明这一点我们可以用两个大写字母命名，而且使用没有什么意义的命名方式：

<template>
    <mym-ain-comp>
       <p>我的新闻</p>
    </mym-ain-comp>
</template>

<script>
import mymAinComp from '../layouts/Main.vue'

export default {
    components: {
       mymAinComp
    }
}
</script>

这里的组件名是叫mymAinComp,引用的地方可以使用<mym-Ain-Comp>

哈哈哈感觉这个规则有点意思