熟悉Vue组件+插槽

案例一 点亮星星

通过控制tempScore来控制鼠标滑过离开的分数，当点击确定时，score等于tempScore

写html

<body>
    <div id="app" style="width: 700px;margin:100px auto;">
        <div>
            <span v-for="(item, i) in num" :key="i" class="iconfont"
                :class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
                @mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    num: 10,
                    tempScore: 3,
                    score: 3
                }
            },
        })
    </script>
</body>

制作组件

  • 默认组件有十颗星星，或者客户自定义num，默认初始分数为0，或者客户自定义value
  • 组件内部的变量如果有变动，需将props里面的变量加工到data中
  • 传入组件的数据类型如果不是字符串，变量名前需要添加冒号
  • 监听，当点击时，score改变，将此值传递出去
<body>
    <div id="app" style="width: 700px;margin:100px auto;">
        <star :value='score' @input='getScore($event)'></star>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('star', {
            props: {
                num: {
                    type: Number,
                    default: 10
                },
                value:{
                    type:Number,
                    default:0
                }
            },
            data() {
                return {
                    score:this.value,
                    tempScore:this.value
                }
            },
            template: ` <div>
            <span v-for="(item, i) in num" :key="i" class="iconfont"
                :class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
                @mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
            </span>
        </div>`,
            watch:{
                score(){
                    this.$emit('input', this.score)
                }
            },
        })
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    score: 3
                }
            },
            methods:{
                getScore(e){
                    console.log(e)
                }
            },
        })
    </script>
</body>

在组件使用时，value和input可以加工成v-model='aa',aa为value，也为组件传出的值

<body>
    <div id="app" style="width: 700px;margin:100px auto;">
        <star v-model="score" ></star>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('star', {
            props: {
                num: {
                    type: Number,
                    default: 10
                },
                value:{
                    type:Number,
                    default:0
                }
            },
            data() {
                return {
                    score:this.value,
                    tempScore:this.value
                }
            },
            template: ` <div>
            <span v-for="(item, i) in num" :key="i" class="iconfont"
                :class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
                @mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
            </span>
        </div>`,
            watch:{
                score(){
                    this.$emit('input', this.score)
                }
            },
        })
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    score: 3
                }
            },
            watch: {
                score(){
                    console.log(this.score)
                }
            }
        })
    </script>
</body>

案例二 双重组件 表格

  • 利用子组件的label得到表头，利用field得到对象属性通过$parent传到父组件
  • 父组件用循环的方式渲染表格
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            margin: 0 auto;
        }
        table{
            text-align: center;
        }
        table td,table th{
            border: 1px #eee solid;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container" >
            <tb :data='userList'>
                <tb-col field='age' label='年龄'></tb-col>
                <tb-col field='name' label='姓名'></tb-col>
                <tb-col field='email' label='邮箱'></tb-col>
            </tb>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('tb', {
            props:{
                data:{
                    type:Array,
                    required:true
                }
            },
            data() {
                return {
                    fieldList:[]
                }
            },
            template: `<table style="width: 100%;" >
                <tr>
                    <slot></slot>
                </tr>
                <tr v-for='item in data'>
                    <td v-for='key in fieldList'>{{item[key]}}</td>
                </tr>
            </table>`
        })
        Vue.component('tb-col', {
            props:['field','label'],
            template: `<th>{{label}}</th>`,
            created() {
                this.$parent.fieldList.push(this.field)
            },
        })

        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    userList: [
                        {
                            id: 1111,
                            name: 'Simba',
                            age: 20,
                            email: "xx@qq.com"
                        },
                        {
                            id: 1131,
                            name: 'Sidgdfhgdfmba',
                            age: 20,
                            email: "x33x@qq.com"
                        }, {
                            id: 141,
                            name: 'Simsdfasfba',
                            age: 20,
                            email: "xx22@qq.com"
                        }
                    ]
                }
            },
        })
    </script>
</body>

</html>

案例三 具名插槽

  • 组件的slot中以slot name='country'的形式，在使用组件时，使用template v-slot:country的形式，定位到想要插入的插槽位置
  • template v-slot:default代表默认插槽
<body>
    <div id="app" style="width: 700px;margin:100px auto;">
        <slot1>
            <template v-slot:province>
                <span>
                    南京
                </span>
            </template>
        </slot1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('slot1',{
            template:`<div>
            <div>
                国家：<slot name='country'></slot>
            </div>
            <div>
                省份：<slot name='province'></slot>
            </div>
        </div>`
        })
        let vm = new Vue({
            el: '#app'
        })
    </script>
</body>

案例四 作用域插槽

  • 当组件是循环创建div，且每个div都有插槽的情况下，需要用作用域插槽确定每个插槽插入的内容，作用域插槽的形式是template v-slot:aa='scope',scope可以解构
  • 需要显示的内容通过attribute的形式放在slot上，除了string形式的变量，其他attr前面都要加冒号
 <my-list :data='titleList'>
            <template v-slot:aa='{id}'>
                <button @click='del(id)'>点击</button>
                {{id}}
            </template>
        </my-list>

Vue.component('my-list', {
    template: ` <ul>
    <li v-for='item in data' >{{item.label}}<slot name='aa' :id='item.field'></slot></li>
</ul>`,
    props: ['data']
})

data() {
    return {
        num1: '1',
        num2: 1,
        titleList: [{
            label: '年龄',
            field: 'age'
        }, {
            label: '姓名',
            field: 'name'
        }, {
            label: '邮箱',
            field: 'email'
        }],
        cols: [{
            label: '年龄',
            field: 'age'
        }, {
            label: '姓名',
            field: 'name'
        }, {
            label: '邮箱',
            field: 'email'
        }],
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 插槽 & 高复用组件
    【2019-3-4更新】Vue 2.6+修改了部分语法，对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 13,480评论 2赞 36
  • Vue初探--组件化篇
    什么是组件？ 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装...
    youins阅读 13,159评论 0赞 13
  • 《Vue.js 实战》基础篇（下）
    本章内容：表单 与 v-model、组件、自定义指令 六、表单 与 v-model 6.1、基本用法 Vue.js...
    了凡和纤风阅读 4,423评论 1赞 2
  • Vue 组件
    此文基于官方文档，里面部分例子有改动，加上了一些自己的理解 什么是组件？ 组件（Component）是 Vue.j...
    陆志均阅读 9,239评论 5赞 14
  • Vue组件,动画,路由 ----Q17
    三、组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML元素，封装可重用...
    小山居阅读 3,770评论 0赞 1