(Vue)组件：v-model深入使用&.sync修饰符&具名插槽&作用域插槽&mixin混入

一、v-model深入使用

v-model 其实就是 v-bind: 和 v-on: 的语法糖。
将自定义组件，绑定数据的属性改成value，监听事件的名称改成input，也可以使用v-model简写形式。

    

        
{{yf.label}}--{{yf.count}}
        
{{kz.label}}--{{kz.count}}
    
    
    

Vue.component('b-counter', {
    template: `
            

                
{{label}}
                

                    -
                    
                    +
                
            
            `,
    props: {
        //文本
        label: {
            type: String,
            required: false,
        },
        //数量
        value: {
            type: Number,
            required: true
        },
        //最大值
        maxCount: {
            type: Number,
            default: 999
        },
        //最小值
        minCount: {
            type: Number,
            default: 1
        }
    },
    //定义数据
    data() {
        return {
            myCount: this.value
        }
    },
    //监听器
    watch: {
        myCount(val) {
            // 触发一个自定义事件，事件名称是input
            this.$emit('input', val)
        }
    }
})

let vm = new Vue({
    el: '#app',
    data: {
        // 衣服
        yf: {
            label: '衣服',
            count: 5
        },
        // 裤子
        kz: {
            label: '裤子',
            count: 5
        }
    }
})

---

二、.sync修饰符

绑定属性采用:xx.sync修饰符，可以省略update:xx对应的事件绑定。
约定 ①：属性绑定必须是xx.sync；
约定 ②：自定义事件必须是update:xx。
如果触发的事件名称是update:属性名，那么就可以使用.sync修饰符简化调用的过程。
总结：如果组件只回传一份数据，用v-model。如果组件回传多份数据，用.sync修饰符。

    
衣服：{{yf}}，裤子：{{kz}}，鞋子：{{xz}}
    
    
    

Vue.component('b-counter', {
    template: `
        

            

                
衣服：
                

                    -
                    
                    +
                
            
            

                
裤子：
                

                    -
                    
                    +
                
            
            

                
鞋子：
                

                    -
                    
                    +
                
            
        
    `,
    props: ['yf', 'kz', 'xz'],
    data() {
        return {
            yfCount: this.yf,
            kzCount: this.kz,
            xzCount: this.xz
        }
    },
    watch:{
        yfCount(val){
            // 自定义事件必须是update:xx
            this.$emit('update:yf',val)
        },
        kzCount(val){
            this.$emit('update:kz',val)
        },
        xzCount(val){
            this.$emit('update:xz',val)
        }
    }
})
new Vue({
    el: '#app',
    data: {
        //衣服数量
        yf: 5,
        //裤子数量
        kz: 5,
        //鞋子数量
        xz: 5
    }
})

---

三、插槽

1、具名插槽
具名插槽：在组件内部通过slot标签定义插槽，再通过name属性给插槽定义名字，这样的插槽称之为具名插槽。
插槽的默认名称是：default。如果有多个插槽，允许其中一个插槽不定义名称。
在template标签中采用v-slot:插槽名称的方式，指定内容在哪一个具体的插槽中呈现。#是v-slot:的简写。

Vue.component('b-box', {
    template: `
        

            

                
房产信息
                
            
            

                
车辆信息
                
            
            

                
存款信息
                
            
        
    `
})
new Vue({
    el: '#app',
})

2、作用域插槽
作用域插槽必须是具名插槽；在作用域插槽上，可以通过v-bind:绑定属性，绑定的属性通过指定的作用域变量（通常会定义scope变量）去接收。

Vue.component('b-box', {
    template:`
    

        

            

                {{item.id}}-{{item.name}}-{{item.price}}
                
            
        
    
    `,
    data() {
        return {
            list:[
                {
                    id:1001,
                    name:'苹果手机',
                    price:5999
                },
                {
                    id:1002,
                    name:'华为手机',
                    price:6999
                },
                {
                    id:1003,
                    name:'小米手机',
                    price:7999
                },
                {
                    id:1004,
                    name:'三星手机',
                    price:8999
                }
            ]
        }
    }
})
new Vue({
    el:'#app',
    methods: {
        priceDown(list,index){
            list[index].price-=1000
        },
        priceUp(list,index){
            list[index].price+=1000
        }
    },
})

---

四、mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。mixin()方法的参数是配置对象，Vue实例可以配置的东西，它都可以配置。比如：数据，方法，生命周期钩子函数，计算属性，侦听器，过滤器，等等...
全局混入的内容，之后创建的所有Vue实例包括组件实例都将拥有。在创建Vue实例时，会将mixin里面的成员跟Vue实例自身的成员进行合并，如果冲突了，最终采用Vue实例身上的成员。
特别注意：生命周期钩子不是合并，是叠加执行，是先执行mixin里面的生命周期钩子，再执行Vue实例里面的生命周期钩子。

    
姓名：
    
年龄：++
    
性别：
    
税前薪资：税后薪资：
    sayHi
    
汽车信息：{{car}}



    
姓名：
    
年龄：++
    
性别：
    
税前薪资：税后薪资：
    sayHi
    
飞机信息：{{plane}}

//全局混入，给所有的Vue实例混入统一的成员 -- 注意：必须要先执行
Vue.mixin({
    data() {
        return {
            name: '',
            age: 0,
            sex: '男',
            salary: 1000
        }
    },
    computed: {
        salary2() {
            return this.salary * 0.88
        }
    },
    methods: {
        sayHi() {
            alert(`大家好！我叫${this.name}，性别是${this.sex}，今年${this.age}岁`)
        }
    },
    watch: {
        age(val) {
            if (val > 100) {
                alert('年龄不能超过100岁')
                this.age = 100
            }
        }
    },
    mounted() {
        console.log('mixin：组件挂载完成');
    },
})
// 创建第一个Vue的实例--操作的容器是#app1
new Vue({
    el: '#app1',
    data() {
        return {
            car: {
                name: '奔驰',
                price: '100W'
            }
        }
    },
    // 注意：先执行混入的生命周期，再执行自己的生命周期
    mounted() {
        console.log('app1：组件挂载完成');
    },
})
// 创建第二个Vue的实例--操作的容器是#app2
new Vue({
    el: '#app2',
    data() {
        return {
            plane: {
                name: '波音747',
                price: '100Y'
            }
        }
    },
})

混入ajax的基本操作
我们可以在Vue.mixin() 可以写个ajax的封装方法，
这样我们在实例中可以直接调用封装过的ajax

Vue.mixin({
methods: {
        // get方法
        async $get(url,params){
            let {data} = await axios.get(this.base_url+url,{params})
          return data
        },
        // post方法
        async $post(url,params){
            let {data} = await axios.post(this.base_url+url,params)
            return data
        }
    },
})