vue父子组件传参、兄弟组件传参、页面跳转传参

1、父组件向子组件传参

父组件向子组件共享数据需要使用自定义属性

// 父组件
<template>
  <div>
    // 使用子组件
    <son :msg="message" :userInfo="userInfo"></son>
  </div>
</template>

<script>
// 引入子组件
import son from './test'

export default {
  name: 'dad',
  data() {
    return {
      // 动态绑定数据
      message: '我是父组件',
      userInfo: {name: '父亲', age: 50}
    }
  },
  components: {
    // 注册子组件
    son
  }
}
</script>

// 子组件
<template>
  <div>
    <h1>父组件传递的msg值是:{{ msg }}</h1>
    <h1>父组件传递的userInfo值是:{{ userInfo }}</h1>
  </div>
</template>

<script>
export default {
  name: '',
  // 接受父组件传递的参数
  props: ['msg', 'userInfo']
}
</script>

<style scoped>

</style>

注：props在vue里面设置为只读，是对外接口，props类似公有属性，允许外部访问。本来约定props不允许直接修改，不过想修改也是可以直接修改，但是建议通过emit事件通过父组件修改，让父组件感知变化。也就是单项数据流。所以，props能在子组件中被修改，但不推荐。

2、子组件向父组件传参

父组件向子组件共享数据需要使用自定义事件

// 父组件
<template>
  <div>
    // 使用子组件，并监听子组件自定义的事件
    <son @sonCount="getSonCount"></son>
  </div>
</template>

<script>
// 引入子组件
import son from './test'

export default {
  name: 'dad',
  data() {
    return {
      sonCount: 0
    }
  },
  components: {
    // 注册子组件
    son
  },
  methods: {
    getSonCount(val) {
      this.sonCount = val
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <h1>我是子组件--------{{ count }}</h1>
    <button @clikc="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
      // 修改数据时候，通过$emit()触发自定义事件
      this.$emit('sonCount', this.count)
    }
  }
},
</script>

<style scoped>

</style>

 3、兄弟组件传参

在兄弟组件中，传递值的方法有四种。

1. 子传父，父传子
2. vuex
3. eventBus
4. 本地储存（sessionStorage.setItem|sessionStorage.getItem）

（1）子传父，父传子

这种情况是兄弟组件在存在同一个父组件中，选择曲线传值，先把子A组件的值传给父组件，父组件再把值传给子B组件。

（2）利用vuex，把值存储在store仓库当中，需要值的兄弟组件再调取仓库的数据

<script>
import {mapGetters, mapState} from 'vuex'

export default {
  computed: {
    // 从计算属性getter中抽取值
    ...mapGetters(['goodsList']),
    // 从当前仓库数据中抽取值
    ...mapState({
      total: state => state.search.searchList.total
    })
  },
}
</script>

详情使用参考vuex模块式开发_麦多馅饼的博客-CSDN博客

（3）eventBus

1. 创建eventBus.js模块，并向外共享一个Vue的示例对象
2. 在数据发送方，调用bus.$emit('事件名称',要发送的数据) 方法触发自定义事件
3. 在数据接收方，调用bus.$om('事件名称',事件处理函数) 方法注册一个自定义事件

也可以将eventBus注册为全局组件，这样就不需要局部引用就可以直接使用

new Vue({
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount('#app')

（4）本地储存（sessionStorage.setItem|sessionStorage.getItem）

sessionStorage.setItem("SKUINFO",this.skuInfo) // 设置的值

sessionStorage.getItem('SKUINFO') // 获取存储的值

4、页面四种传参方法

 参考博主：vue四种页面跳转传参方法 - 简书

1、push方法：

query传参 参数会在链接后面显示
      this.$router.push({
        path: "/home",
        query: { id: 1 },
      });

params传参 参数不会显示在链接后面
      this.$router.push({
        name: "/home",
        params: { id: 1 },
      });

注意：

1. params传参要用name 不能用path 
2. 接受参数：this.$route.params 和 this.$route.query

 2、window.href 传参：

let username = 'zs'
window.location.href = `home/?user=${username}`

3、router-link标签跳转传参 ：

  <router-link :to="{name:'home',params:{user:zs}}">点击跳转</router-link>

4、利用resolve新打开新窗口传参

const {href}= this.$router.resolve({
                name:"animation",//要打开的路由name
                query:{
                    id:321 //传递参数
                }
  });
  window.open(href,"_blank") //打开新窗口