一、组件注册使用

组件使用步骤

（全局组件）
①创建组件构造器

//构造组件方式一
const cpn = Vue.extend({
    template:`
        <div>
            <h1>注册的组件</h1>
        </div>
    `
})

②注册组件

Vue.component('mycpn',cpn)

③使用组件在vue实例对象管理的 域 中才能够使用

<div id="app">
    <mycpn></mycpn>
</div>

(局部组件)

//构造组件方式二
<template id="cpn">
    <div>
        <h1>注册的组件</h1>
    </div>
</template>

const app = new Vue({
    el: '#app',
    data: {
    
    },
    components: {
          mycpn: '#cpn'
    }
})

（父子组件）
①构造子组件

<template id="son_cpn">
    <div>
        <h1>注册的子组件</h1>
    </div>
</template>

②父组件中注册子组件

const father_cpn = Vue.extend({
    template:`
        <div>
            <h1>注册的父组件</h1>
            <son-cpn></son-cpn>
        </div>`,
     components:{
          'son-cpn': '#son_cpn' //注册子组件
     }
})

③注册父组件

const app = new Vue({
    el: '#app',
    data: {
    
    },
    components: {
          'father-cpn': father_cpn 
    }
})

④使用

<div id="app">
    <father-cpn></father-cpn>
    <son-cpn></son-cpn>//无法解析，子组件只在父组件中注册
</div>

语法糖

①方式1

Vue.component('cpn',{
    template:`
        <div>
            <h1>注册的组件</h1>
        </div>
    `
})

②方式2

<template id="cpn">
    <div>
        <h1>注册的组件</h1>
    </div>
</template>

const app = new Vue({
    el: '#app',
    data: {
    
    },
    components: {
        cpn: {
             template: '#cpn'
         }
    }
})

二、组件间的通信

父传子

父传子的通信通过props

<div id="app">
    <cpn :msg="father_msg"></cpn>
</div>
<template id="cpn">
<div>
    <h1>{{msg}}</h1>
</div>
</template>

//子组件
const cpn = {
    template: '#cpn',
    data(){
        return {}
    },
    props: [ 'msg' ] //定义一个msg变量 与子组件上绑定的变量一致
    /*props对象写法
    props: {
        msg:{
            type: String,
            default: '默认数据'  //父组件没传值时显示
        }
        //or
        msg: String
   }
    */
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {
         father_msg:'父组件的数据'
    },
    components: {
        cpn
    }
})

子传父

子传父的通信通过自定义事件

<div id="app">
    <cpn @fatherclick="fatherclick"></cpn>
</div>
<template id="cpn">
<div>
    <h1>子组件内容</h1>
    <button @click="sonclick">传数据给父组件</button>
</div>
</template>

//子组件
const cpn = {
    template: '#cpn',
    data(){
        return {
            son_msg: '子组件的数据'
        }
    },
    methods:{
        sonclick(){
            this.$emit('fatherclick',this.son_msg) //发射fatherclick事件，并在组件上监听该事件
        }
    }
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {
         
    },
    methods:{
        fatherclick(data){
            console.log(data)  //打印 ‘子组件的数据’
        }
    },
    components: {
        cpn
    }
})

父访问子

通过$children、$refs访问

<div id="app">
    <cpn ref="a"></cpn>
    <cpn ref="b"></cpn>
    <button @click="getchildren">访问子组件</button>
</div>
<template id="cpn">
<div>
    <h1>子组件内容</h1>
</div>
</template>

//子组件
const cpn = {
    template: '#cpn',
    data(){
        return {
            son_msg: '子组件的数据'
        }
    },
    methods:{
        
    }
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {
         father_msg: '父组件的数据'
    },
    methods:{
        getchildren(){
             console.log(this.$children)  //不常用 输出一个对象Array
             console.log(this.$refs)  //常用，需要在子组件上设置ref属性 
            //输出 {a:{...},b:{...}}
        }
    },
    components: {
        cpn
    }
})

子访问父

通过$root、$parent访问

<div id="app">
    <cpn></cpn>
</div>
<template id="cpn">
<div>
    <h1>子组件内容</h1>
    <button @click="getparent">访问父组件</button>
</div>
</template>

//子组件
const cpn = {
    template: '#cpn',
    data(){
        return {
            son_msg: '子组件的数据'
        }
    },
    methods:{
        getparent(){
            console.log(this.$parent)  //父组件对象Array
            console.log(this.$root)  //获取根组件对象
        }
    }
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {
         father_msg: '父组件的数据'
    },
    methods:{
      
    },
    components: {
        cpn
    }
})

三、slot插槽

使用slot可以让组件具有扩展性,更灵活

具名插槽

<div id="app">
    <cpn-box>
        <cpn-left slot="left"/>
        <cpn-center slot="center"/>
         <cpn-right slot="right"/>
    </cpn-box>
</div>

<template id="cpn-box">
<div>
    <h1>子组件盒子内容</h1>
<!-- slot属性对应name进行替换 没有slot属性的会替换所有没有name属性的插槽!-->
    <slot name="left"><span>默认左</span></slot>
    <slot name="center"><span>默认中</span></slot>
    <slot name="right"><span>默认右</span></slot>
</div>
</template>

<template id="cpn-left">
<div>
    <h1>子组件-左</h1>
</div>
</template>

<template id="cpn-center">
<div>
    <h1>子组件-中</h1>
</div>
</template>

<template id="cpn-right">
<div>
    <h1>子组件-右</h1>
</div>
</template>

//子组件
const cpnbox = {
    template: '#cpn-box'
}
const cpnleft = {
    template: '#cpn-left'
}
const cpncenter = {
    template: '#cpn-center'
}
const cpnright = {
    template: '#cpn-right'
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {    
    },
    components: {
        'cpn-box': cpnbox,
        'cpn-left': cpnleft,
        'cpn-center': cpncenter,
        'cpn-right': cpnright,
    }
})

作用域插槽

使用子组件的data数据进行插槽需要使用作用域插槽，否则取不到
先用v-bind对插槽绑定数据，再使用<template slot-scope="slotObj"></template>来获取slotObj(插槽对象)进而获取对应数据

<div id="app">
    <cpn></cpn>
    <cpn>
      <template slot-scope="slotObj"> 
        <p>{{slotObj.data}}</p>
      </template>
    </cpn>
</div>
<template id="cpn">
<div>
    <h1>子组件内容</h1>
    <slot :data="msg">
        <span>{{msg}}</span>
    </slot>
</div>
</template>

//子组件
const cpn = {
    template: '#cpn',
    data(){
        return {
            msg: '子组件的数据'
        }
    }
}
//父组件实例
const app = new Vue({
    el: '#app',
    data: {
    },
    components: {
        cpn
    }
})

Vue组件化