熟悉Vue組件+插槽

案例一 點(diǎn)亮星星

通過控制tempScore來控制鼠標(biāo)滑過離開的分?jǐn)?shù)，當(dāng)點(diǎn)擊確定時(shí)，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>

制作組件

  • 默認(rèn)組件有十顆星星，或者客戶自定義num，默認(rèn)初始分?jǐn)?shù)為0，或者客戶自定義value
  • 組件內(nèi)部的變量如果有變動(dòng)，需將props里面的變量加工到data中
  • 傳入組件的數(shù)據(jù)類型如果不是字符串，變量名前需要添加冒號(hào)
  • 監(jiān)聽，當(dāng)點(diǎn)擊時(shí)，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>

在組件使用時(shí)，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得到對(duì)象屬性通過$parent傳到父組件
  • 父組件用循環(huán)的方式渲染表格
<!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'的形式，在使用組件時(shí)，使用template v-slot:country的形式，定位到想要插入的插槽位置
  • template v-slot:default代表默認(rèn)插槽
<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>

案例四 作用域插槽

  • 當(dāng)組件是循環(huán)創(chuàng)建div，且每個(gè)div都有插槽的情況下，需要用作用域插槽確定每個(gè)插槽插入的內(nèi)容，作用域插槽的形式是template v-slot:aa='scope',scope可以解構(gòu)
  • 需要顯示的內(nèi)容通過attribute的形式放在slot上，除了string形式的變量，其他attr前面都要加冒號(hào)
 <my-list :data='titleList'>
            <template v-slot:aa='{id}'>
                <button @click='del(id)'>點(diǎn)擊</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'
        }],
},
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容