Vue组件化

一、组件注册使用

组件使用步骤

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

//构造组件方式一
const cpn = Vue.extend({
    template:`
        

            
注册的组件
        
    `
})

②注册组件

Vue.component('mycpn',cpn)

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

(局部组件)

//构造组件方式二

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

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

②父组件中注册子组件

const father_cpn = Vue.extend({
    template:`
        

            
注册的父组件
            
        
`,
     components:{
          'son-cpn': '#son_cpn' //注册子组件
     }
})

③注册父组件

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

④使用

    
    //无法解析，子组件只在父组件中注册

语法糖

①方式1

Vue.component('cpn',{
    template:`
        

            
注册的组件
        
    `
})

②方式2

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

二、组件间的通信

父传子

父传子的通信通过props

//子组件
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
    }
})

子传父

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

//子组件
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访问

    
    
    访问子组件

//子组件
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访问

//子组件
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可以让组件具有扩展性,更灵活

具名插槽

//子组件
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对插槽绑定数据，再使用来获取slotObj(插槽对象)进而获取对应数据

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