Vue传值的多种方式

 

原文：https://blog.csdn.net/qq_35430000/article/details/79291287

1.通过路由带参数进行传值

两个组件A和B，A组件通过query把numId传递给B组件（触发的事件可以是点击事件、钩子函数等）

this.$router.push({path:'/conponentsB',query:{numId:123}})    //跳转到B

在B组件中获取A组件传递过来的参数

this.$router.query.numId

2.通过设置Session Strong缓存的形式进行传递

注意：Session Strong(程序退出销毁)和Local Storage(长期保存)的区别

 两个组件A和B，在A组件中设置缓存numData

const numData={'numId':123,'price':88}

sessionStrong.setItem('缓存名称',JSON.stringify(numData))

 B组件可以获取A中设置的缓存

const dataB=JSON.parse(sessionStrong.getItem('缓存名称'))

此时dataB就是数据numData

 3.父子组件之间传值

父组件往子组件传值props

 

定义父组件，父组件传递number这个数值给自组件，如果传递的参数很多，可以使用json数组{}的形式

parent.vue

<template>
  <div class="wrapper">     例如：传递数字88给自组件
    <Header :number=88><Header/>   
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from "components/Header"

  export default {
  components:{
    Header
  }
}
</script>

 

定义子组件，子组件通过props方法获取父组件传递过来的值，props中可以定义能接收的数据类型，不符合会报错

Header.vue

<template>
  <div class="wrapper">
    {{number}}   显示父组件传递过来的值，显示88
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
  props:{        限制父组件传递过来的值的数据类型，不符合就报错
    ‘number  ’:[Number,String,Object], 
    'string':[String]        可以传递多个值，逗号隔开
  }
}
</script>

 

假如接收的参数是动态的，比如input输入的内容v-model的形式

 

parent.vue

<template>
  <div class="pranent">
    <input type="text"  v-model="inputText"> 
    <Header :input-val='inputText'><Header/>      注意：传递的参数名称不识别驼峰命名，推荐使用 横线-命名（input-val）
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from "components/Header"

  export default {
  components:{
    Header
  }
}
</script>

 

Header.vue

<template>
  <div class="pranent">
    {{inputVal}}          注意：显示的位置可以驼峰 
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
  props:{
    'input-val':[String]
  }
}
</script>

子组件往父组件传值，通过emit事件

 

children.vue

<template>
  <div class="children">       子组件通过emit事件给父组件传递内容
    <button @click="emitToParent">单击按钮传值给父组件</button> 
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
  methods:{
    emitToParent(){      不支持驼峰命名

         this.$emit('child','我是子组件往父组件传递的内容')

   }
  }
}
</script>

 

parent.vue

<template>
  <div class="parent">       
    <Children @child-event="parentEvent"></Children>      parentEvent触发了父组件的一个方法，然后执行相应的操作
                                                                                           child-event这是子组件中自定义的方法    
  </div>
</template>    

<script type="text/ecmascript-6">
  import Children from "components/Children "

  export default { 

  components:{
        Children
  },
  methods:{
    parentEvent(data){       data是子组件传递过来的数据
            console.log(data)        输出：我是子组件往父组件传递的内容
   }
  }
}
</script>

4.不同组件之间传值，通过eventBus(小项目少页面用eventBus，大项目多页面使用vuex)

定义一个新的vue实例专门用于传递数据，并导出

eventBus.js

import  Vue  from  'Vue'

export  default  new Vue()

定义传递的方法名和传输内容，单击事件或钩子函数触发eventBus.emit事件

<template>
  <div class="componentsA">     组件A单击按钮往组件B传递数据  
    <button @click="emitToB">单击按钮传递数据给兄弟组件B</button> 
  </div>
</template>    

<script>
  import eventBus from "common/js/eventBus.js"       引入eventBus.js,其实就是引入另一个vue实例

  export default { 

  methods:{
        emitToB(){                                            定义方法名和要传输的数据
              eventBus.$emit('eventFromA','我是组件A传递给组件B的数据')
      }
  }
}
</script>

接收传递过来的数据

注意：eventBus是一个另一个新的Vue实例，区分两个this所代表得实例

<template>
  <div class="componentsB">     组件A单击按钮往组件B传递数据  
        {{title}}      最终显示传递过来的值
  </div>
</template>    

<script>
  import eventBus from "common/js/eventBus.js"       引入eventBus.js

  export default { 

  data(){
        return{                                       
              title:''
      }
  },
  methods:{
        this.getEventData()
  },
  methods:{
        getEventData(){                            
              const  that=this                     这个this是项目vue的实例，用that接收，与eventBus的vue区分
              eventBus.$on('eventFromA',function(val)){
                     that.title=val            
                     //  this.title=val                   这个this指的是eventsBus的Vue实例
    })
   }
  }
}
</script>

5.vuex进行传值

vuex主要是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手

具体内容请看原文