剑轩

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

电脑版发表于:2020/6/25 16:34

端午节快乐~



其实就是两种方法:

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

<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>

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





关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢