参考：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. 01二维背包——poj2576

    /* 要求把a数组分成两个集合,两个集合人数最多差1,并且元素之和的差尽可能小 那只要把所有可行的列出来即可 01二维背包,即体积是个二维数据,那么我们的背包状态也应该设为二维 dp[j][k]设为 ...

  2. NX二次开发-UFUN创建倒角UF_MODL_create_chamfer

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN S ...

  3. NX二次开发-算法篇-创建最大边界包容盒

    NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include <u ...

  4. 从yjz那里偷来的fread读入挂

    struct fastio{ char s[100005]; int it,len; fastio(){it=len=0;} inline char get(){ if(it<len)retur ...

  5. Java--用键盘控制小球

    package secondpack; import java.awt.*; import java.awt.event.*; public class MyBall { public static ...

  6. linux下df查看空间已经占用%100，但是找不到大文件的解决方法

    有时候在linux下会遇到这种情况:df查看空间已经占用%100,但是找不到大文件,怎么回事呢,经过网上查找资料,得到解决方法: 1.使用lsof查看已删除但未释放的文件 lsof -n | grep ...

  7. LaTeX+TexStudio安装与使用

    (很多杂志期刊接受LaTeX电子版时会提供自己的模板,只要使用他们的模板即可完美地展现在对应的刊物中) 0x00. 优点 丰富易用的数学公式和特殊符号: 容易生成图表编号.引用.交叉引用.目录: 可以 ...

  8. jquery控件的学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Hadoop节点集群挂了，Hbase数据源损坏怎么办

    今天集群节点一下子挂了5台,hbase的数据块也损坏. hadoop日志 .0.15:36642 dest: /ip:50010 2014-08-26 15:01:14,918 WARN org.ap ...

  10. C4D中python初探

    use_name = input('请输入账号') password = input('请输入密码') if use_name == 'alex' and password == 'alex3714' ...