router路由使用，子父组件互相传递值

最新推荐文章于 2023-06-01 18:16:24 发布

今天你好、阳光正好

最新推荐文章于 2023-06-01 18:16:24 发布

阅读量3.5k

点赞数

文章标签： JavaScrip

本文链接：https://blog.csdn.net/qq_40281275/article/details/84332013

版权

父组件向子组件传值（通过在子组件绑定子组件中数组prop中的元素=父组件中data属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-bloak]{
            display: none;
        }
    </style>
</head>
<body>
<script src="vue-2.4.0.js"></script>
<div id="app">
    <com1 :parentmsg="msg" :parentmsg2="msg2"></com1>
    <!--<com2 :parentmsg2="msg2"></com2>-->
</div>
<script>
    var vn = new Vue({
        el:"#app",
        data:{
           msg:'这是父组件中的data数据',
           msg2:'这是父组件中的第二个data数据'
        },
        methods: {},
        components: {
            com1: {
                template: '<h1 @click="change" @dblclick="change2">===============这是子组件数据======={{parentmsg}} ========={{parentmsg2}}==========</h1>',
                props: ['parentmsg','parentmsg2'],
                methods: {
                    change() {
                        this.parentmsg = '父组件没修改，但页面修改了'
                    },
                    change2(){
                        this.parentmsg2 = '我跟换的第二个,但是父组件还是没更改'
                    }
                }

            }
        }
    })
</script>
</body>
</html>

子组件向父组件传值（在子组件中绑定一个事件@fic=‘父组件方法名’ 然后通过在子组件方法中this.emit('fic','ok')）传递参数给父组件方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [v-bloak]{
                display: none;
            }
        </style>
    </head>
<body>
<script src="vue-2.4.0.js"></script>
<div id="app">
    <com1 @fic="show"></com1>
</div>
<script>

    var vn = new Vue({
        el:"#app",
        data:{
            msg:'这是父组件中的data数据'
        },
        methods: {
            show(get){
                console.log('我是父组件的方法')
            }
        },
        components:{
            com1:{
                template:'<h1 @click="change">这是子组件</h1>',
                methods:{
                    change(){
                        this.$emit('fic','ok')
                    }
                }
            },

        }
    })
</script>
</body>
</html>

在vue中使用路由

首先导入路由包<script src="lib/vue-router-3.0.1.js"></script>

再次，一定要在div中添加<router-view>标签占位符，否则页面没有效果

<router-link to="/login" tag="div">登录</router-link>  起到切换作用

<router-link to="/register">注册</router-link>

注意路由对象中数组为routes 路由在vue对象中属性名为router以及link中也为router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [v-bloak]{
                display: none;
            }
        </style>
    </head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<div id="app">
    <h1>想看到我的内在美吗？那你得输入&ltrouter-view&gt和我的组件名字</h1>
    <!--<a href="#/login">登录</a>-->  <!-- 锚点定位-->
    <!--<a href="#/register">注册</a>-->

   <!--&lt;!&ndash; 这块代替了a标签&ndash;&gt;  路径与path对应，否则页面出不来-->
    <router-link to="/login" tag="div">登录</router-link>     <!--这块显示为a标签-->
    <router-link to="/register">注册</router-link>
    <router-view></router-view>  <!-- 占位符，如果没有，则页面啥也没显示-->

</div>
<script>

    var login = {
        template:'<h1>登录组件</h1>'
    };
    var register = {
        template:'<h1>注册组件</h1>'
    };
    var routerObj = new VueRouter({
        routes:[
            // 属性1：path表示监听，哪一个路由链接地址
            // 属性2：component：path对应显示的组件
            // 注意：component属性值必须是一个组件的末班对象，不是组件引用名称（不是com1，是login）
            // {path:'/',component:login},   /*默认为登录组件，但是地址没改变为login*/
            {path:'/',redirect:'/login'},
    //         重定向（Redirect）:
    // 当客户端（浏览器）向服务器发送一个URL请求后，但是资源并不在当前请求的服务器上，此时服务器会告诉浏览器，资源在另外一个URL地址上，此时浏览器会重新发送请求到新的资源地址。
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]   //所有的路由匹配规则
    })
    var vn = new Vue({
        el:"#app",
        data:{
            msg:'这是父组件中的data数据'
        },
        methods: {},
        router:routerObj

    })
</script>
</body>
</html>

路由高亮显示案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*想要自定义样式名字，vue中.router-link中中找到linkActiveclass给他赋值---------在路由对象中定义*/
            [v-bloak]{
                display: none;
            }
            .my{
                display: block;
                background-color: red;
            }
            .router-link-active{
                color:red;
                font-style: italic;
                font-size: 32px;
                font-weight: 700;
            }
            .v-enter,v-leave-to {
                opacity: 0;
                transform: translateX(150px);
            }
            .v-enter-active,v-leave-active {
                transition: all 2s ease;
            }
        </style>
    </head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<div id="app">
    <router-link to="/login">登录</router-link>     <!--这块显示为a标签,这里面有默认样式-->
    <router-link to="/register">注册</router-link>
    <transition mode="out-in">
        <router-view></router-view>  <!-- 占位符，如果没有，则页面啥也没显示添加动画是在占位符-->
    </transition>

</div>
<script>

    var login = {
        template:'<h1>登录组件</h1>'
    };
    var register = {
        template:'<h1>注册组件</h1>'
    };
    var routerObj = new VueRouter({
        routes:[
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ] ,  //所有的路由匹配规则
        linkActiveClass: 'my'
    })
    var vn = new Vue({
        el:"#app",
        data:{
            msg:'这是父组件中的data数据'
        },
        methods: {},
        router:routerObj

    })
</script>
</body>
</html>

由query传递参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*想要自定义样式名字，vue中.router-link中中找到linkActiveclass给他赋值---------在路由对象中定义*/
            [v-bloak]{
                display: none;
            }
            .router-link-active{
                color:red;
                font-style: italic;
                font-size: 32px;
                font-weight: 700;
            }
        </style>
    </head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<div id="app">
    <router-link to="/login?id=12&name=zs">登录</router-link>     <!--这块显示为a标签,这里面有默认样式-->
    <router-link to="/register">注册</router-link>
        <router-view></router-view>

</div>
<script>

    var login = {
        // 通过vn中找到_route对象里面有一个query对象里面有id
        template:'<h1>登录组件----{{$route.query.id}}-----{{$route.query.name}}</h1>',
        created(){
            console.log(this.$route)
        }
    };
    var register = {
        template:'<h1>注册组件</h1>'
    };
    var router= new VueRouter({
        routes:[
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ] ,  //所有的路由匹配规则
        linkActiveClass: 'my'
    })
    var vn = new Vue({
        el:"#app",
        data:{
            msg:'这是父组件中的data数据'
        },
        methods: {},
        // router:router
        router   //因为与对象名字一样

    })
</script>
</body>
</html>

由parms传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*想要自定义样式名字，vue中.router-link中中找到linkActiveclass给他赋值---------在路由对象中定义*/
            [v-bloak]{
                display: none;
            }
            .router-link-active{
                color:red;
                font-style: italic;
                font-size: 32px;
                font-weight: 700;
            }
        </style>
    </head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<div id="app">
    <router-link to="/login/12/zs">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>

</div>
<script>

    var login = {
        template:'<h1>登录组件------{{$route.params.id}}-------{{$route.params.name}}</h1>'
    };
    var register = {
        template:'<h1>注册组件</h1>'
    };
    var router= new VueRouter({
        routes:[
            // {path:'/',redirect:'/login/:id/:name'},    没有router-link to 传值
            // :与?一样都是传值
            {path:'/login/:id/:name',component:login},
            {path:'/register',component:register}
        ] ,  //所有的路由匹配规则
        linkActiveClass: 'my'
    })
    var vn = new Vue({
        el:"#app",
        data:{
            msg:'这是父组件中的data数据'
        },
        methods: {},
        // router:router
        router   //因为与对象名字一样

    })
</script>
</body>
</html>

评论案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
    <style>
        [v-bloak]{
            display: none;
        }
    </style>
</head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<div id="app">
    <!--列表组里面的徽章-->
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人:{{item.user}}</span>
            {{item.content}}
        </li>
    </ul>
    <com1 @func="loadComments"></com1>
</div>
<template id="temp1">
    <div>
        <!--form-group=========给一个margin-bottom-->
        <div class="form-group">
            <label>评论人:</label>
            <input type="text" class="form-group" v-model="user">
        </div>
        <div class="form-group">
            <label>评论内容:</label>
            <textarea class="form-control" v-model="content"></textarea>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" @click="comment">发表评论</button>
        </div>
    </div>
</template>
<script>
    var vn = new Vue({
        el:"#app",
        data:{
            list:[
                {id:Date.now(),user:'万茜',content:'我喜欢吃大杂蟹'},
                {id:Date.now(),user:'胡海泉',content:'我喜欢主持节目'},
                {id:Date.now(),user:'撒贝林',content:'我喜欢百科全书'},
                {id:Date.now(),user:'金庸',content:'我喜欢你们看我的小说'}
            ],

        },
        created(){
            this.loadComments();
        },
        methods: {
            // 从本地的localStorage中获取数据，加载评论列表
            loadComments(){
                var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                this.list = list;
            }
        },
        components:{
            com1:{
                template:'#temp1',
                data(){
                    return{
                        user:'',
                        content:''
                    }
                },
                methods:{
                    comment(){
                        // 数据先保存到localStorage中 ，localStorage.setItem('ctm','')
                        //先拿到数据，组织成一个对象
                        //吧2的对象添加到localStorage
                        // 1.先获取localStorage
                        // 2.重新把数据缓存到localStorage
                        var comment = {id:Date.now(),user:this.user,content:this.content};
                            var list = JSON.parse(localStorage.getItem('ctm') || '[]');
                        list.unshift(comment);
                        localStorage.setItem('cmts',JSON.stringify(list));
                        this.user = this.content = '';
                        this.$emit('func');
                    }
                }
            }
        }
    })
</script>
</body>
</html>

利用children嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [v-bloak]{
                display: none;
            }
        </style>
    </head>
<body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>
<template id="temp1">
    <div>
        <router-link to="/account/login">登录组件</router-link>
        <router-link to="/account/register">注册组件</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    const account = {
        template:'#temp1'
    };
   const login = {
        template:'<h1>登录组件</h1>'
    };
    const register = {
        template:'<h1>注册组件</h1>'
    };
    var routes = new VueRouter({
        routes:[
            {
                path:'/account',
                component:account,
                children:[
                    {path:'login',component:login},
                    {path:'register',component:register}
                ]
            }
        ]
    })
    var vn = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components:{
            account:account
        },
        router:routes            /* ====================== 注意vue对象中路由属性  以及link中也为router  ，路由实例对象自由命名，对象数组为routes*/
    })
</script>
</body>
</html>

今天你好、阳光正好

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
router路由使用，子父组件互相传递值

父组件向子组件传值（通过在子组件绑定子组件中数组prop中的元素=父组件中data属性）&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;
复制链接

扫一扫