props 父子传值简单的路由传参

上官华年

已于 2022-06-22 01:04:18 修改

阅读量541

点赞数

分类专栏： vue 文章标签： java servlet 前端

于 2022-06-22 00:22:07 首次发布

本文链接：https://blog.csdn.net/qq_43658378/article/details/125401242

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue中父子组件间的数据传递，包括父给子、子给父的通信方式，并通过示例代码展示了如何实现。同时，还讲解了Vue Router的参数传递，包括从Page1组件向Page2组件传递参数，以及Page2组件回传参数到Page1的过程。这些内容对于理解Vue应用中的数据流动和路由管理至关重要。

摘要由CSDN通过智能技术生成

1.父给子 tt（父） son（子）

tt
<template>
    <div>
        付给子
        <Son :msg='msg'></Son>
    </div>
</template>

<script>
    import Son from './Son'
    export default {
        name: "User",
        components: {Son},
        data(){
            return{
                msg:'这是数据'
            }
        },
    }
</script>

son
<template>
    <div>
        父给子
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "Son",
        props:{
            msg:String
        }
    }
</script>

2. 子给付

tt
<template>
    <div>
        子给{{msg}}父
        <Son @gei="sou"></Son>
    </div>
</template>
<script>
    import Son from './Son'
    export default {
        name: "User",
        components: {Son},
        data(){
            return{
                msg:'',
            }
        },
        methods:{
            sou(msg){
                this.msg=msg;
            }
        }
    }
</script>

son
<template>
    <div>
        子给父
        <input type="text" v-model="xxx"></input>
    </div>
</template>
<script>
    export default {
        name: "Son",
        data(){
            return{
                xxx:''
            }
        },
        watch:{
            xxx(){
                this.$emit("gei",this.xxx);
            }
        }
    }
</script>

3.路由传参

tt
<template>
    <div>
        <h1>page1</h1>
        <router-link :to="{name:'son',params:{'id':this .id}}">son</router-link>
        <br>
        <p>{{msg}}</p><br>
        <h1> 欢迎回来。{{this.$route.params.num}}</h1>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件",
                id:1
            }
        }
    }
</script>


son

<template>
    <div>
        <h1>page2</h1>
        <router-link :to="{name:'tt',params:{'num':this.num}}">tttttt</router-link>
        <br>
        <p>{{msg}}</p><br>
        <h1> 欢迎回来。{{this.$route.params.id}}</h1>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page2组件",
                num:2
            }
        }
    }
</script>


 { path: '/tt', name: 'tt', component: () => import('../views/service/tt.vue')},