自定义组件方式

一、组件命名的方式

　　①kebab-case，单词之间采用  - （短横线）连接，例如：my-component ，在DOM中使用时，<my-component ></my-component >

　　②PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，<my-component ></my-component >，<MyComponent></MyComponent>是识别不了的。

二、局部组件注册

局部组件定义在vue实例内部，该组件只能在vue实例控制范围内才能使用

<!--
局部组件注册及使用 
导入组件
 import 组件名 from '路径'
 注册组件 
export default{
 components:{ 
组件名 }}
使用组件 
<组件名/>
-->

 三、全局组件注册

全局组件定义在Vue组件里，导入一次，其他地方都能使用

<!--
全局组件注册及使用 
局部组件：在哪里导入，就只能在哪里使用。
 全局组件：导入一次，其他地方都能用
 main.js文件里 
导入组件 
import 组件名 from '路径
 组册组件
 Vue. component('组件名',导入的组件）-->

 如何导入注册全局组件？

//导入全局组件
 import GloCom from ' . / components / GloCom '
 import StuCom from ' . / components / StuCom '

// 注册全局组件 
//参数一：组件名（一般和文件名一样 
//参数二：对应的组件 
Vue . component ( ' GloCom' , GloCom )
Vue . component ( ' StuCom' , StuCom )

组件关系

组件关系 当项目中的组件越来越多之后，组件间可能会出现彼此嵌套的情况。 一个组件里包含了另外一个组件，包含别人的叫父组件，被包含的叫子组件。 同级别的就叫兄弟组件。

父子关系solt卡槽

solt标签用来添加父组件,想要插入子组件的内容.

1.创建一个子组件，并在vue实例中注册

var testzujian = {
        template:`<div>
            <span>这是子组件的内容</span>   
            </div>`
    }

2.注册子组件

let vm = new Vue({
	el:'.root',
	 components:{
            testzujian:testzujian
        },
})

3.在vue实例中写入想要插入到子组件的内容 

let vm = new Vue({
        el:'.root',
        components:{
            testzujian:testzujian
        },
        template:`<div>
            <testzujian>
                <template v-slot:slotcontent>
                    <span>这是父组件向子组件插入的内容</span>    
                </template> 
            </testzujian>
            </div>`,
    })

4. 在子组件的模板中通过一个slot标签来引入父组件模板中内添加的内容

var testzujian = {
        template:`<div>
            <span>这是子组件的内容</span>
            <slot name="slotcontent">
            </slot>    
            </div>`
    }