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

效果

html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>js实现vue—引入子组件props传参</title>

        <link rel="stylesheet" href="css/1.css">

        <script type="text/javascript" src="js/jquery.js"></script>

        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

        <script src="js/1.js"></script>

    </head>

    <body>

        <div id="app">

            <keep-alive>

                <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>

            </keep-alive>

            <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>

        </div>

        <script type="text/x-template" id="page1">

            <div>

                <TopNav :show-btn="ifShow"></TopNav>,

                <!-- 对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法 -->

                <p class="content">页面1</p>

                <router-link to="/page2" tag="span" class="btnRouter">页面2</router-link>

                <BlankPage id="BlankPage1"></BlankPage>

                <!-- 多个组件引入同一组件改变显示/隐藏状态时，需绑定指定id，否则多个组件会混乱 -->

            </div>

        </script>

        <script type="text/x-template" id="page2">

            <div>

                <TopNav :show-btn="ifShow"></TopNav>

                <p class="content">页面2</p>

                <BlankPage id="BlankPage2"></BlankPage>

            </div>

        </script>

    </body>

</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: "<p class='title'> " +

            "<span>顶部组件</span>" +

            "<span v-show='showBtn' class='btnBack' @click='$router.back(-1)'>返回</span>" +

            "</p>"

    })

    /* 子级props属性声明时，使用小驼峰或者中划线写法都可以；

       而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法

    */

    // 顶部组件  end

    // 正在加载组件  start

    var BlankPage = Vue.extend({

        template: "<div class='BlankPage'>" +

            "<div class='loadingDiv'>" +

            "<p class='loadingIcon'>" +

            "<img src='img/load.gif' alt=''>" +

            "</p>" +

            "<p class='loadingTxt'>正在加载...</p>" +

            "</div>" +

            "</div>"

    })

    // 正在加载组件  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;

}

js 实现vue—引入子组件props传参的更多相关文章

  1. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  3. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  4. 【Angular】父组件监听子组件事件(传参)

    Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目

  5. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...

  6. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  7. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  8. vue:页面跳转和传参（页面之间，父传子，子传父）

    1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...

  9. Vue 给子组件绑定v-model

    父组件使用子组件时,使用v-model指令,在子组件中使用value获取props的值 父组件 <template> <div style="margin:20px;dis ...

随机推荐

  1. Delphi里面弹出对话框的方法

    1.procedure   ShowMessage(const   Msg:   string); 单元:Dialogsor   QDialogs 例子:showmessage( 'hello '); ...

  2. C++之运算符重载（一元）

    一.-符号重载 1.成员函数重载负号 2.友元函数重载负号 3.补充说明 <1> <一元运算符编码实现(一)>课程笔记: A:事实上,我们的重载运算符返回void.返回对象本身 ...

  3. ionic-CSS：ionic 颜色

    ylbtech-ionic-CSS:ionic 颜色 1.返回顶部 1. ionic 颜色 ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色. 实例 <ul class=&q ...

  4. linux在不关机情况下新增硬盘的方法

    开机状态插入硬盘 不关机执行命令 echo "- - -" > /sys/class/scsi_host/host0/scan 注意 echo "- - -&quo ...

  5. Qt无边框窗口的移动、拉伸边框、鼠标滚轮缩放大小

    主要是处理窗口上鼠标的几个事件,具体代码请看下面的截图, 完整代码的下载链接在此:http://download.csdn.net/detail/beyond0824/9657110, 本示例代码中, ...

  6. Devexpress ProgressBarControl的使用

    1 private void simpleButton1_Click(object sender, EventArgs e) 3 { 4 //设置一个最小值 5 progressBarControl1 ...

  7. 日常 java+雅思+训练题1

    今天主要学了一些类似c中的一些语句,java也是一样类似的,只有一些点需要稍微注意一下,一些语句是新增的需要知道. 完完全全新学的知识就是class和instance的区别.如何创建实例.数据的封装. ...

  8. JQuery AJAX 通过一般处理程序 取列表

    由于上一篇的积累 这一个就简单了 也就是把反回了字符串 显示到table中 $("#btnSearch").click(function () { $.post("Cur ...

  9. USACO2007 Protecting the Flowers /// 比值 前缀和 oj21161

    题目大意: 有N (2 ≤ N ≤ 100,000) 头牛偷吃花 将牛赶回牛棚需Ti minutes (1 ≤ Ti ≤ 2,000,000) 每头牛每分钟能吃Di (1 ≤ Di ≤ 100) 朵花 ...

  10. java_函数式编程写法

    package cn.aikang.Test; import org.junit.Test; import java.util.Scanner; import java.util.function.S ...