js 实现vue—引入子组件props传参

参考：https://www.cnblogs.com/xiaohuochai/p/7388866.html

效果：

props传参.gif

html:

1.js:

$(document).ready(function() {
    Vue.prototype.$show = function(obj) { //全局函数1
        var o = $(obj);
        o.css('display', 'block');
    };
    Vue.prototype.$hide = function(obj) { //全局函数2
        var o = $(obj);
        o.css('display', 'none');
    };

    Vue.use(VueRouter);

    // 顶部组件  start
    var TopNav = Vue.extend({
        data() {
            return {
                showBtn: false
            }
        },
        props: ['showBtn'],
        watch: {
            showBtn: function(newVal, oldVal) {
                this.showBtn = newVal;
            }
        },
        template: "
 " +
            "顶部组件" +
            "返回" +
            "
"
    })
    /* 子级props属性声明时，使用小驼峰或者中划线写法都可以；
       而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法
    */

    // 顶部组件  end

    // 正在加载组件  start
    var BlankPage = Vue.extend({
        template: "
" +
            "
" +
            "
" +
            "" +
            "
" +
            "
正在加载...
" +
            "
" +
            "
"
    })
    // 正在加载组件  end

    // 页面1  start
    var Page1 = Vue.extend({
        data() {
            return {
                ifShow: false
            }
        },
        template: "#page1",
        // 局部注册子组件
        components: {
            TopNav,
            BlankPage
        }
    })
    //页面1  end

    //页面2  start
    var Page2 = Vue.extend({
        data() {
            return {
                ifShow: true
            }
        },
        template: "#page2",
        components: {
            TopNav,
            BlankPage
        }
    })
    //页面2  end

    var router = new VueRouter({
        routes: [{
                path: '/',
                name: 'Page1',
                meta: {
                    index: 0,
                    keepAlive: true,
                    title: '页面1'
                },
                component: Page1
            },
            {
                path: '/page2',
                name: 'Page2',
                meta: {
                    index: 1,
                    keepAlive: false,
                    title: '页面2'
                },
                component: Page2
            }
        ]
    })

    router.beforeEach((to, from, next) => {
        var toDepth = to.meta.index;
        var fromDepth = from.meta.index;

        if (to.meta.title) {
            document.title = to.meta.title;
        }

        if (toDepth == 'undefined' || toDepth == undefined) {
            if (true) {
                //这个可以关闭安卓系统的手机
                document.addEventListener('WeixinJSBridgeReady', function() {
                    WeixinJSBridge.call('closeWindow');
                }, false);
                //这个可以关闭ios系统的手机
                WeixinJSBridge.call('closeWindow');
                // wx.closeWindow();
            }
            return;
        } else if (toDepth < fromDepth) { //返回
            from.meta.keepAlive = false;
            to.meta.keepAlive = true;
        }
        next()
    })

    var app = new Vue({
        el: '#app',
        router
    }).$mount('#app')
})

1.css:

@CHARSET "UTF-8";

body {
    width: 100%;
    height: 100%;
}

body,
div,
p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.content {
    margin-top: 200px;
}

.title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding-left: 50px;
    line-height: .60px;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: lightseagreen;
    z-index: 1;
}

.btnBack {
    margin-left: 50%;
}

.btnRouter {
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    display: inline-block;
    background-color: lightseagreen;
    color: #fff;
    border-radius: 10px;
}

.NoMore {
    font-size: 14px;
    color: #888;
    margin-top: 30px;
    text-align: center
}

#NoMore1,
#NoMore2 {
    display: none;
}

.NoMoreTxt:before {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 1px;
    background-color: #dadada;
}

.NoMoreTxt:after {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    background-color: #dadada;
    margin-bottom: 5px;
    margin-left: 10px;
}

#BlankPage1,
#BlankPage2 {
    display: none;
}

.BlankPage {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #fff;
    background-color: #fff;
    -webkit-transition: all .2s ease-out;
    transition: all .5s ease-out;
    transition: all .5s ease-out;
    transition: all .5s ease-out;
    position: fixed;
    top: 0;
    z-index: 12;
}

.loadingDiv {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 50px;
}

.loadingTxt {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.loadingIcon {
    text-align: center;
}

.loadingIcon img {
    display: inline-block;
    width: 40%;
    height: 48px;
}