Vue-自定义组件3

好看的网页千篇一律，有趣的代码万里挑一。

一到秋天，南京就美成了金陵。

现在已经初冬了，南京街头还是深秋景象。

这种配色，看起来极度舒适。

为平淡的生活，混入一丝仙气。

四季的轮转，给熟悉的街景添加了不同的滤镜。

换个角度，完全是全新的视觉盛宴。

知识的更迭，让思维产生质变。

欣赏完美景，回归到工作。

保持学习的热情，温故而知新。

今天继续Vue自定义组件知识。

---

1. 深入理解v-model

// 定义一个数据加减的组件

Vue.component('b-counter', {

template: `

    -

   

    +

`,

props: {

// 数量

value: {

// 类型

type: Number,

// 非空

required: true,

},

// 最小值

minCount: {

type: Number,

// 默认值

default: 1

},

// 最大值

maxCount: {

type: Number,

default: 10

}

},

// 定义组件的数据

data() {

return {

// 从props里面将value的值给myCount复制一份

myCount: this.value

}

},

// 定义组件的方法

methods: {

//数量减方法

jian() {

this.myCount--

},

// 数量加方法

jia() {

this.myCount++

}

},

// 侦听器

watch: {

// 侦听myCount是否发生变化

myCount() {

// 触发自定义事件，注意：事件名称中不能采用大写字母

this.$emit('input', this.myCount)

}

}

})

new Vue({

el: "#app",

data() {

return {

name: '张三',

// 衣服的数量

yfcount:2

}

},

methods: {

},

})

2. .sync修饰符

   

       

衣服数量：{{yfcount}}

       

裤子数量：{{kzcount}}

       

鞋子数量：{{xzcount}}

       

       

---

       

       

       

   

// 定义一个数据加减的组件

Vue.component('b-counter', {

template: `

    -

   

    +

`,

props: {

// 数量

value: {

// 类型

type: Number,

// 非空

required: true,

},

// 最小值

minCount: {

type: Number,

// 默认值

default: 1

},

// 最大值

maxCount: {

type: Number,

default: 10

}

},

// 定义组件的数据

data() {

return {

// 从props里面将value的值给myCount复制一份

myCount: this.value

}

},

// 定义组件的方法

methods: {

//数量减方法

jian() {

this.myCount--

},

// 数量加方法

jia() {

this.myCount++

}

},

// 侦听器

watch: {

// 侦听myCount是否发生变化

myCount() {

// 触发自定义事件，注意：事件名称中不能采用大写字母

this.$emit('input', this.myCount)

}

}

})

// 定义一个b-box组件

Vue.component('b-box', {

// 模板中必须包含一个根标签

template:`

   

衣服：

   

   

裤子：

   

   

鞋子：

   

`,

props:['yfcount','kzcount','xzcount'],

data() {

return {

// 将props传进来的数据，在data中备份一下，从此以后操作data中的数据

myyfcount:this.yfcount,

mykzcount:this.kzcount,

myxzcount:this.xzcount

}

},

watch:{

myyfcount(){

// 注意：这里触发事件的名称是：update:属性名；

// 如果满足该规则，那么在触发事件时，就可以使用sync修饰符简化调用的过程。

this.$emit('update:yfcount',this.myyfcount)

},

mykzcount(){

this.$emit('update:kzcount',this.mykzcount)

},

myxzcount(){

this.$emit('update:xzcount',this.myxzcount)

}

}

})

new Vue({

el: "#app",

data() {

return {

// 衣服的数量

yfcount:2,

// 裤子的数量

kzcount:3,

// 鞋子的数量

xzcount:5

}

},

methods: {

},

})

3. 具名插槽

   

       

       

       

       

       

   

// 在组件内部通过slot标签定义插槽，在通过name属性给插槽定义名字，这样的插槽称之为：具名插槽。// 插槽的默认名称是：default。如果有多个插槽，允许其中一个插槽不定义名称。Vue.component('b-box',{template:`

   

我是组件

   

   

   

   

   

   

   

       

   

   

    `})newVue({el:'#app',})

4. 作用域插槽

   

       

       

   

Vue.component('b-box', {

    // 可以在slot标签上绑定属性，这样外面在使用该插槽时，就可以获取到上面绑定的数据。

    // 这样的插槽，我们称之为：作用域插槽

    template:`

   

   

   

•     {{item.id}}--{{item.name}}

     

     

   

   

    `,

    data() {

        return {

            list:[

                {

                    id:1001,

                    name:'薯片'

                },

                {

                    id:1002,

                    name:'饼干'

                },

                {

                    id:1003,

                    name:'面包'

                },

                {

                    id:1004,

                    name:'糖果'

                },

            ]

        }

    },

})

new Vue({

    el:'#app',

})

5. 混入

突然想到了炒鸡蛋，，鸡蛋打散混入葱花，搅拌均匀。

哈哈，代码中也可以混入，密钥是mixin

   

app1

   

姓名：{{name}}，年龄：{{age}}，工资：{{money}}

    sayHi

    修改工资

   

---

   

app2

   

姓名：{{name}}，年龄：{{age}}，工资：{{money}}

    sayHi

    修改工资

   

// 全局混入 -- 注意：必须要先执行

Vue.mixin({

    // mixin()方法的参数是配置对象，Vue实例可以配置的东西，它都可以配置。

    // 比如：数据，方法，生命周期钩子函数，计算属性，侦听器，过滤器，等等...

    data() {

        return {

            name:'张三',

            age:20,

            money:10000,

        }

    },

    methods: {

        sayHi(){

            alert('大家好！')

        },

        // 更新工资的方法

        updateMoney(){

            this.money+=1000

        }

    },

    mounted() {

        console.log('mixin里面定义的生命周期钩子函数----我已经挂载完毕....');

    },

    computed:{

        usMoney(){

            return '$'+(this.money/6).toFixed(2)

        }

    },

})

// 在全局混入的内容，之后创建的所有Vue实例包括组件实例都将拥有。

// 在创建Vue实例时，会将mixin里面的成员跟Vue实例自身的成员进行合并，如果冲突了，最终采用Vue实例身上的成员。

// 特别注意：生命周期钩子不是合并，是叠加执行，是先执行mixin里面的生命周期钩子，再执行Vue实例里面的生命周期钩子。

// 定义组件

Vue.component('b-box', {

    template:`

   

   

姓名：{{name}}，年龄：{{age}}，工资：{{money}}，美元工资：{{usMoney}}

    sayHi

    修改工资

   

    `,

    methods: {

        updateMoney(){

            this.money+=10000

        }

    },

    mounted() {

        console.log('组件自己定义的生命周期钩子函数----我已经挂载完毕....');

    },

})

// 创建第一个Vue的实例--操作的容器是#app1

new Vue({

    el:'#app1',

})

// 创建第二个Vue的实例--操作的容器是#app2

new Vue({

    el:'#app2',

})

6. 混入ajax的基本操作

{{students}}

---

{{subjects}}

   

---

   

课程名称：

   

课程年级：

   

课程课时：

   

添加

// 将ajax请求相关的操作，通过mixin混入给Vue

Vue.mixin({

    data() {

        return {

            // 接口根路径

            base_url:'http://www.bingjs.com:81'

        }

    },

    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

        }

    },

})

new Vue({

    el:'#app1',

    data() {

        return {

            // 学生信息

            students:[]

        }

    },

    created() {

        this.getStudents()

    },

    methods: {

        async getStudents(){

            let students = await this.$get('/Student/GetAll')

            this.students = students.map(s=>s.StudentName)

        }

    },

})

new Vue({

    el:'#app2',

    data() {

        return {

            // 课程信息

            subjects:[],

            subject:{

                subjectName:'',

                classHour:'',

                gradeId:''

            }

        }

    },

    created() {

        this.getSubjects()

    },

    methods: {

        async getSubjects(){

            let subjects = await this.$get('/Subject/GetAll')

            this.subjects = subjects.map(s=>s.SubjectName)

        },

        async add(){

            let r = await this.$post('/Subject/Add',this.subject)

            if(r){

                alert('添加成功！')

            }

        }

    },

})

是不是越来越有趣了，试试看敲出来的效果吧。