vue组件（页面）之间的传值方式

拼搏现实的明天。 2023-02-28 05:29 773阅读 0赞

### 一.路由传参 ###

#### 1.`query`方式传参 ####

`query` 方式是使用查询字符串 `?id=xx&name=xx`，给路由传参，不需要修改路由规则的 `path` 属性  
获取 `query`路由参数的方式 `$route.query.xx`

<div id="app">
        
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = { 
            template:'<h1>登录组件---{ { $route.query.id }}--{ { $route.query.name }}</h1>',
            data(){ 
                return{ }
            },
            created(){  //组件的生命周期钩子函数
                console.log(this.$route.query.id)
            }
        }
        var router = new VueRouter({ 
            routes:[
                {  path:'/login', component:login }
            ]
        })
        var vm = new Vue({ 
            el: '#app',
            data: { },
            methods: { },
            router
        });
    </script>

#### 2.`params`方式传参 ####

`params` 方式使用 `/xx/xx` 的方式给路由传递参数，则需要修改 路由规则的 `path` 属性 `path:'/login/:xx/:xx'`  
获取 `params` 路由参数的方式 `$route.params.xx`

<div id="app">
        
        <router-link to="/login/20/ls">登录</router-link>
        <router-view></router-view>
    </div>
    
    <script>
        var login = { 
            template:'<h1>登录组件---{ { $route.params.id }}--{ { $route.params.name }}</h1>',
            data(){ 
                return{ }
            },
            created(){  //组件的生命周期钩子函数
                console.log(this.$route.params.id)
            }
        }
        var router = new VueRouter({ 
            routes:[
                {  path:'/login/:id/:name', component:login },
            ]
        })
        var vm = new Vue({ 
            el: '#app',
            data: { },
            methods: { },
            router
        });
    </script>

### 二.组件传值 ###

#### 1.父组件给子组件传值 ####

父组件

<sub-content :parent="parentData"></sub-content>

import subContent from './subContent.vue'
    export default { 
    	data() { 
    		return { 
    			parentData: '我是父组件的值',
    		}
    	},
    	components: { 
    	  subContent
    	},
    	methods: { }
    }

子组件

<template>
      <div>
        <p>{ { parent}}</p>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { }
      },
      methods: { },
      props: { //注意：组件中的所有 props 中的数据，都是通过 父组件传递给子组件的
       //props 中的数据，都是只读的，无法重新赋值
        parent: { 
          type: String,
          required: true
        }
      }
    }
    </script>

父组件中，可以在引用子组件的时候，通过 属性绑定(v-bind)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

##### 补充 #####

可以使用 `.sync` 修饰符实现 prop 数据的双向绑定

#### 2.父组件给子组件传递方法 ####

父组件

<sub-content @parentFunc="getMe"></sub-content>

import subContent from './subContent.vue'
    export default { 
    	data() { 
    		return { 
    			parentData: '我是父组件的值',
    		}
    	},
    	components: { 
    	  subContent
    	},
    	methods: { 
    	  getMe() { 
    	    console.log(this.parentData)
    	  },
    	}
    }

子组件

<template>
      <div>
        <button @click="getParentData">点击我得到父组件的值</button>
      </div>
    </template>
    <script>
    export default { 
      data() { 
        return { }
      },
      methods: { 
        getParentData() { 
          // 当点击子组件的按钮的时候，使用 $emit 拿到 父组件传递过来的 parentFunc 方法，
          // 并调用这个方法
          this.$emit('parentFunc')
        }
      },
    }
    </script>

父组件向子组件 传递方法，使用的是 事件绑定机制：v-on ，当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的这个方法了

#### 3.子组件给父组件传值 ####

父组件

<sub-content @parentFunc="getMe"></sub-content>

import subContent from './subContent.vue'
    export default { 
    	data() { 
    		return { 
    			parentData: '我是父组件的值',
    		}
    	},
    	components: { 
    	  subContent
    	},
    	methods: { 
    	  getMe(data) { 
    	    console.log(this.parentData, data)
    	  },
    	}
    }

子组件

<template>
      <div>
        <button @click="getParentData">点击我得到父组件的值</button>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          msg: '我是子组件的值'
        }
      },
      methods: { 
        getParentData() { 
          // 子组件给父组件传值，通过 $emit 的方法参数传递
          this.$emit('parentFunc', this.msg)
        }
      },
    }
    </script>

#### 4.兄弟组件之间传值 ####

有两种方法，可以借助先子传父，再父传子  
这里主要说明第二种方法：`eventBus` 事件总线

在 `components` 目录下新建了 `common` 文件夹，里面目录为  
![在这里插入图片描述][20200720160518115.png]

// bus.js
    import Vue from 'vue';
    
    // 使用 Event Bus
    const bus = new Vue;
    
    export default bus;

子组件1：`childOne.vue`

<template>
      <div>
        <p>兄弟1</p>
        <button @click="sendMsg">兄弟组件之间传值</button>
      </div>
    </template>
    <script>
    import bus from './bus'
    export default { 
      data() { 
        return { 
          one: '我是兄弟1的值'
        }
      },
      methods: { 
        sendMsg() { 
          bus.$emit('send', this.one)  // one 发送消息给 two
        }
      }
    }
    </script>

子组件2： `childTwo.vue`

<template>
      <div>
        <p>兄弟2</p>
        <p>{ { two}}</p>
      </div>
    </template>
    <script>
    import bus from './bus'
    
    export default { 
      data() { 
        return { 
          two: '兄弟2自己的值'
        }
      },
      created() {   // 在生命周期为 created 的时候，通过 bus 中央时间总线用 $on 监听组件发送
        // 的时间，用一个带参数的回调函数，接受传递过来的值
        bus.$on('send', val => {  // two 监听到 one 发送过来的消息
          this.two = val
        })
      },
      beforeDestroy() { 
        bus.$off('send')  // 监听后一定要在 beforeDestroy 中使用 $off 释放
      },
    }
    </script>

父组件

<template>
      <div class="hello">
        <child-one></child-one>
        <child-two></child-two>
      </div>
    </template>
    <script>
    import childOne from './common/childOne'
    import childTwo from './common/childTwo'
    export default { 
      name: 'HelloWorld',
      components: { 
        childOne,
        childTwo
      },
    }
    </script>

`$emit`：触发  
`$on`：监听  
`$off`：释放

#### 5.vuex 传值 ####

[20200720160518115.png]: /images/20230209/4e35f90b815c42ab8285fbcba32ab878.png