vue实现父级与子组件之间相互传值搭建一个多组件选项卡代码-html代码-BFW代码库

vue实现父级与子组件之间相互传值搭建一个多组件选项卡代码

代码语言：html

所属分类：选项卡

代码描述：vue实现父级与子组件之间相互传值搭建一个多组件选项卡代码，每个选项卡内容是一个单独的组件。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .nav{
            padding: 8px;
        }
            .bg_white{
                padding: 3px;
                background: white !important;
                color: black !important;
            }
            .bg_red{
                 padding: 3px;
                background: red;
                color: white;
            }
            button{
                border: none;
                cursor: pointer;
            }
            .item-label{
            margin: 4px;
            }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav bg_red">
            <div class="nav_items">
                <nav-item v-for="item in nav_item_title" v-bind:key="item" v-bind:itemname="item" v-bind:class="['item-label','bg_red',{bg_white:current_page==item}]" v-on:toggle="test1" v-on:click.native="test"></nav-item>
            </div>

        </div>
        <component v-bind:is="current_component"></component>

    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>


    <script>
        Vue.component("tab-page1",{
                        props:['itemname'],
                        template:"<div>page1 content</div>",
                         computed:{
                            current_component:function(){
                                return "tab-"+this.current_page;
                            }
                        },
                        
                        methods:{
                            togg:function(){
                                this.$emit("toggle",this.itemname)
                            },
                            battle:function(){
                               // alert(this.itemname);
                                this.togg();
                            }
                        }
                    });
                    Vue.component(&.........完整代码请登录后点击上方下载按钮下载查看