今天来总结一下vue的传参方式

组件间传参

1.父给子传参

父组件在使用子组件的地方自定义属性传递变量，然后子组件用props+父元素自定义属性来接收

父组件

父组件引用子组件后，通过v-bind向子组件传值

    <template>
        <div>
          <h1>父组件</h1>
          <router-view v-bind:fatherData="data"></router-view>
        </div>
      </template>
        
      <script>
      export default {
        data () {
          return {
            data: '父组件数据data'
          };
        }
      }
      </script>

子组件

把父组件传递过来的数据， 在 props数组 中定义一下，使用prop中接收的数据。

<template>
        <div>
          <h1>子组件</h1>
          <p>父组件数据：{{fatherData}}</p>
        </div>
      </template>

      <script>
        export default {
          props: ['fatherData'],
          data () {
            return {
           
            };
          }
        }
        </script>

2.子给父传参

方式：父组件先在使用子组件的地方自定义事件，用参数来接受传来的值，然后子组件用this.$emit(父元素自定义事件，传递的值)来传递

子组件通过事件向父组件传值，通过$emit  触发将子组件的数据当做参数传递给父组件

父组件

<template>
    <div>
      <h1>父组件</h1>
      <router-view @show="showFather"></router-view>
    </div>
  </template>
    
  <script>
  export default {
    data () {
      return {
        sonData: '',
        sonData2: ''
      };
    },
    methods: {
    showFather (val1, val2) {
      this.sonData = val1; 
      this.sonData = val2; 
      console.log('子组件的值'+a+'=========='+b); 
    }
}
}
 </script>

子组件：

<template>
    <div>
      <h1>子组件</h1>
      <Button type="primary" @click="sonClick">像父组件传值</Button>
    </div>
  </template>
    
  <script>
  export default {
    data () {
      return {
        sonData1: '子组件第一个数据',
        sonData2: '子组件第二个数据'
      };
    },
    methods: {
      sonClick () {
        this.$emit('show', this.sonData1, this.sonData2);
      }
    }
  }
  </script>

3.兄弟组件间传参（用Vuex代替）

通过给eventbus注册事件，别的组件触发事件，实现通信。

1. 创建一个eventbus对象，即创造一个vue对象，用作传递信息。
2. 接收信息的一方将事件通过vm.$on(“事件名”,事件处理函数)添加在eventbus对象上。
3. 发送数据的一方，通过vm.$emit(“事件名”,传递的数据)触发事件，将数据传递。

路由传参

a. 通过params

需要在router的path后跟上参数

{
path: "/two/:id/:data",
name: "two",
component: two
}

跳转时

  this.$router.push({
  path: `/two/1/456` //直接把数据拼接在path后面
})

接收时

this.$route.params  {id:1, data:456}

b. 通过query

跳转时

this.$router.push({
path: `/two`,
query: { id: 1, data: 456 }
});
//two?id=1&data=456

接收时

this.$route.query

params 和 query 都是传递参数的， params 不会在 url 上面出现，并且 params 参数是路由的一部分， 是一定要存在的 , query 是我们通常看到的 url 后面的跟在？后面的显示参数 。