vue高级特性之界面传值（父子界面，兄弟界面，非父子界面）,路由配置,get传参

最新推荐文章于 2025-06-13 16:50:23 发布

置顶准时长大

最新推荐文章于 2025-06-13 16:50:23 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue路由 get传参父子页面传值非父子页面传值

本文链接：https://blog.csdn.net/T_james/article/details/88947028

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍Vue.js中父组件与子组件之间的多种通信方式，包括数据传递、方法调用及事件广播等，并详细讲解了基础路由配置、动态路由传参及GET传参的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此篇文章是在idea前后端分离demo博客后，对其中的一些特性进行学习和积累。

1.父组件给子组件传值

新建Home.vue组件和Header.vue组件，其中Home.vue组件为父组件，后者为子组件

其中最主要的步骤如下:

父组件引入子组件并用标签声明
父组件需要给子组件传递哪些数据（可以传递普通数据，方法，实体等）
子组件用props数组进行接收----props:['title','run']，亦可以通过调动方法，用this.父组件ID.方法进行调用

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
    
        <v-header :title="title" :homemsg='msg'  :run="run"  :home="this"></v-header>

        <hr>
         首页组件   

    </div>

</template>


<script>


/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据





*/

    import Header from './Header.vue';

    export default{
        data(){
            return {               
               msg:'我是一个home组件',
               title:'首页111'
            }
        },
        components:{

            'v-header':Header
        },
        methods:{

            run(data){

                alert('我是Home组件的run方法'+data);
            }
        }


    }

</script>

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red
    }

    
</style>

Header.vue组件

<template>


    <div>
    
        <h2>我是头部组件--{{title}}---{{homemsg}}</h2>

        <button @click="run('123')">执行父组件的方法</button>

        <br />
        <br />
        
        <button @click="getParent()">获取父组件的数据和方法</button>

       
    </div>
</template>




<script>
    
export default{


    data(){

        return{
            msg:'子组件的msg'
        }
    },
    methods:{
        getParent(){
            // alert(this.title)



            // alert(this.home.title)


            this.home.run()

        }

    },
    props:['title','homemsg','run','home']
    
}

</script>

2.父组件主动获取子组件方法和属性

还是在之前的两个页面进行编辑......

引入子组件后定义一个ref属性----<rou1 :title="title" :run="run" ref="r1"></rou1>
父组件可以通过按钮等方式获取子组件方法----this.$refs.r1.children();
子组件定义相应方法或者属性调用即可。

3.子组件主档获取父组件的方法和属性

确保父组件中引入了子组件----import Header from './Header.vue';
子组件使用this.$parent.属性即可获取相应的父组件的属性和方法

4.非父子组件互相传值：（事件广播的方式）

在main.js中引入基本的vue组件（一般都已经引入了）
在传值和接收传值页面导入vueEvent.js
传值页面使用:VueEvent.$emit('to-home',this.msg)-----第一个字段可以理解为标识，第二个字段为数据
接收传值页面可以使用勾子函数mounted函数进行接收:

mounted(){            
            //监听news 广播的数据
            VueEvent.$on('to-home',function(data){
                console.log(data);
            })
        }

类似于一个监听事件，监听传值页面发出的to-home事件

5.基础路由---在main.js中进行配置---默认路由为没匹配到则跳转到首页

//导入依赖
import VueRouter from 'vue-router';
Vue.use(VueRouter);

1引入组件
import home from './components/Home.vue'
import news from './components/News.vue'
//2.配置路由   注意：名字

const routes = [
  { path: '/home', component: home },
  { path: '/news', component: news },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]


//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//加载实例化的vue
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

父子路由配置，需要在父路由中进行绑定和配置

{ path: '/user', component: user,
    children:[
      { path: 'useradd', component: UserAdd },

      { path: 'userlist', component: Userlist }
    ]
    }

路由配置除了在main.js中进行配置，还需在相应地方配置路由标签

    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>

router-link可以理解为子路由标签上图中的to标签代表main.js中配置的路由名称，router-view可以理解为启动路由标签

如果是父子路由的话，可以在main.js配置路由后，在父页面设定子路由的路径，最后router-view开启路由，实例如下:

<template>
    <div id="user">
        <div class="user">
            <div class="left">
                  <ul>
                      <li>
                        <router-link to="/user/useradd"> 增加用户</router-link>
                      </li>

                      <li>
                            <router-link to="/user/userlist"> 用户列表</router-link>  
                    </li>
                  </ul>
            </div>

            <div class="right">
                  <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
     export default {
        data() {
            return {
                msg:'这是user页面'
            }
        }
}
</script>

<style>
    .user{

        display:flex;

        .left{

            width:200px;

            min-height:400px;

            border-right:1px solid #eee;

            li{

                line-height:2;
            }
        }

        .right{
            flex:1;
        }

    }
</style>

6.动态路由传参

main.js中配置content参数为{ path: '/content/:id', component: content },其中的:id类似于http请求中的path参数
页面配置的时候进行匹配<router-link :to="'/content/'+key">{{key}}---{{item}}</router-link>
this.$router.push({ path: '/content/495' });-----发出
console.log("aid为:"+this.$route.params.aid);----打印动态路由参数

一个简单的请求如下

var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
            console.log("api1111111:"+api);
            this.$http.get(api).then((response)=>{
                console.log(response);
                this.list = response.body.result[0];
            },(err)=>{
                console.log(err);
            })

7.get传参

其实方式和动态路由传参大同小异

<router-link :to="'/product?id='+key"> {{key}}----{{pro}}</router-link>----配置get路径
{ path: '/product', component: product }-----main.js中配置（不需要配置）
console.log(this.$route.query);----打印get请求参数

总结一下：

1.有时候不能一味的追求官方文档，还是得看下视频，否则官网出错了自己还不知道

2.学无止境，时刻保持谦逊的心