[JavaScript知识库]Vue组件

? ? ? ? 主要分为局部组件和全局组件。

? ? ? ? 在今天的课上学习了Vue脚手架的搭建，以及其组件的创建和使用。

局部组件

? ? ? ? 首先是局部组件，在同一个vue文件下，<script>标签下使用Vue.component（）命令创建局部组件；Vue.component("组件名",{template:组件方法})

Vue.component("TestDemoM1",{
    template:"<h1>Demo1组件1</h1>"
})

????????引用时在<template>的div标签内直接使用标签即可，写法有两种，其一是直接写组件名；其二是大写字母小写并且在大写字母前用 - 隔开。（Visual Studio Code编辑器自动小写的第二种写法）

<template>
    <div>
        <TestDemoM1/>
        <test-demo-m1/>
    </div>
</template>

????????

全局组件

????????其次就是全局组件，全局组件需要建立在src文件夹下的main.js文件中，使用局部组件同样的命令格式创建。Vue.component("组件名",{template:组件方法})。

????????创建完成后直接在需要使用的页面按照局部组件的使用方法使用即可。

Vue.component("TestDemoM2",{
  template:'<h1>全局组件TestDemoM2</h1>'
})

<template>
    <div>
        <TestDemoM2/>
    </div>
</template>

?外部组件

????????其三是将本Vue文件之外的一个网页作为局部或者全局组件引入本Vue文件。

? ? ? ? 局部组件引入的方式是在本文件下的script标签下使用 import ***?from *** （引入src文件夹下的文件使用@开头），然后再上方直接调用文件名name即可。

import ProductCategory from '@/views/test/components/ProductCategory'

<template>
    <div>
        <ProductCategory/>     
    </div>
</template>

? ? ? ? 而全局组件的引入方法也是在main.js文件下，使用相同的方法 import ***?from *** 引入文件路径后，再使用Vue.component("文件名name",组件名)，就可以在需要的页面直接调用了。

import ProductItem from '@/views/test/components/ProductItem'
Vue.component("ProductItem",ProductItem)

<template>
    <div>
        <ProductItme/>     
    </div>
</template>

? ? ? ? 作为初学者应该注意的问题

? ? ? ? ? ? ? ? 作为初学者我认为最值得注意的问题是格式和细节问题。因为实例已经有了，照葫芦画瓢就可以。但是因为一些标点引起的报错真的不好找。

? ? ? ? ? ? ? ? 比如我在敲实例的时候就错将 " " ，写成了 ' ' 、引入时<***/>的/写在了***的前面，诸如此类的错误。找半天才找到错误后恨不得给自己两巴掌?。