Vue--Tab欄切換(父子組件間傳值實現(xiàn))

一、實現(xiàn)原理：

子組件配置props屬性接受父組件傳來的index值，top子組件采用this.$emit方法傳index值給父組件

二、HTML代碼：
<div class="box">
    <my-top @xxx="fnChange"></my-top>
    <my-body :curindex="curindex"></my-body>
</div>
三、CSS代碼：
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

.box {
    width: 400px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 100px auto;
    overflow: hidden;
}

.hd {
    height: 45px;
}

.hd span {
    display: inline-block;
    width: 90px;
    background-color: pink;
    line-height: 45px;
    text-align: center;
}

.hd span.current {
    background-color: purple;
    color: white;
}

.bd li {
    height: 255px;
    background-color: purple;
    display: none;
    color: white;
}

.bd li.current {
    display: block;
}
四、JS代碼：
let vm = new Vue({
    el: ".box",
    data: {
        curindex: 0,
    },
    methods: {
        fnChange(index) {
            this.curindex = index;
        },
    },
    components: {
        //組件1
        "my-top": {
            data() {
                return {
                    titleArr: ["體育", "娛樂", "新聞", "綜合"],
                    tempIndex: 0,
                };
            },
            template: `
        <div class="hd">
            <span @click="change(index)" :class="tempIndex==index?'current':''" v-for='(item,index) in titleArr' :key="item">{{item}}</span>
        </div>
        `,
            methods: {
                change(index) {
                    this.tempIndex = index;
                    this.$emit("xxx", this.tempIndex);
                },
            },
        },

        //組件2
        "my-body": {
            props: {
                curindex: {
                    default: 0,
                },
            },
            data() {
                return {
                    bodys: [
                        "我是體育模塊",
                        "我是娛樂模塊",
                        "我是新聞模塊",
                        "我是綜合模塊",
                    ],
                };
            },
            template: `
        <div class="bd">
            <ul>
                <li :class="curindex==index?'current':''" v-for="(item,index) in bodys" :key="item">{{item}}</li>
            </ul>
        </div>
        `,
        },
    },
});

五、完整代碼：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style-type: none;
            }

            .box {
                width: 400px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                overflow: hidden;
            }

            .hd {
                height: 45px;
            }

            .hd span {
                display: inline-block;
                width: 90px;
                background-color: pink;
                line-height: 45px;
                text-align: center;
            }

            .hd span.current {
                background-color: purple;
                color: white;
            }

            .bd li {
                height: 255px;
                background-color: purple;
                display: none;
                color: white;
            }

            .bd li.current {
                display: block;
            }
        </style>
        <script src="./js/vue2.js"></script>
    </head>

    <body>
        <div class="box">
            <my-top @xxx="fnChange"></my-top>
            <my-body :curindex="curindex"></my-body>
        </div>
        <script>
            let vm = new Vue({
                el: ".box",
                data: {
                    curindex: 0,
                },
                methods: {
                    fnChange(index) {
                        this.curindex = index;
                    },
                },
                components: {
                    //組件1
                    "my-top": {
                        data() {
                            return {
                                titleArr: ["體育", "娛樂", "新聞", "綜合"],
                                tempIndex: 0,
                            };
                        },
                        template: `
        <div class="hd">
            <span @click="change(index)" :class="tempIndex==index?'current':''" v-for='(item,index) in titleArr' :key="item">{{item}}</span>
            </div>
        `,
                        methods: {
                            change(index) {
                                this.tempIndex = index;
                                this.$emit("xxx", this.tempIndex);
                            },
                        },
                    },

                    //組件2
                    "my-body": {
                        props: {
                            curindex: {
                                default: 0,
                            },
                        },
                        data() {
                            return {
                                bodys: [
                                    "我是體育模塊",
                                    "我是娛樂模塊",
                                    "我是新聞模塊",
                                    "我是綜合模塊",
                                ],
                            };
                        },
                        template: `
        <div class="bd">
            <ul>
                <li :class="curindex==index?'current':''" v-for="(item,index) in bodys" :key="item">{{item}}</li>
            </ul>
            </div>
        `,
                    },
                },
            });
        </script>
    </body>
</html
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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