一、父传子

1. 在父组件中引入子组件
2. 在引入的子组件上写上要传递的值
   如要将父组件的name传递给子组件
   
3. 在子组件的props中写上
   props: {
   inputName: String,
   required: true
   }

完整例子：

父组件：

子组件：

二、子传父

1. 子组件需要触发一个事件比如click事件然后再将子组件的值传给父组件

2. 在click处用$emit传值给子组件

比如 this.$emit(‘childByValue’, this.childValue)

3. 父组件中引入子组件，在引入的子组件中写上@childByValue = ‘执行的方法’

完整例子：

子组件：

父组件：

三、非父子组件进行传值bus

1. 非父子组件之间的传值，需要定义一个公共实例文件bus.js，作为中间仓库来传值

// bus.js
import Vue from ’ vue ’
export default new Vue( )

2. 组件A给组件B传值的时候，两个组件都要引入bus文件
3. 引入bus文件之后，组件A用Bus.$emit{(}^{\prime }va{l}^{\prime }{,}^{\prime }this.elementVa{l}^{\prime })，组件B用$on接收， Bus.$on( ’ val ', ( data ) => {
   vm.name = data
   } )

完整例子

组件A传值给组件B

A组件：

组件B：

四、provide和inject的父子传值

1. 应用场景：很多儿子想要得到父亲的值，当然可以用到上面说的父传子，如果很多儿子的话就要写很多的props，provide和inject就可以少写很多代码

2. 在父组件app中与data同级写个provide( ) {
   return {
   ‘ app ’: this（ 这是将当前的app组件的实例分享出去了 ）
   }
   }

注意：provide想data一样需要return

3. 在app的子组件中inject。同样在子组件中与data平级写上inject: [ ’ app ’ ],在子组件中就可以拿到app父组件的整个实例了

完整例子：

父组件app.vue：

export default {
name:‘app’,
provide(){
return {
//将当前的app.vue的实例分享出去
‘app’:this
}
},
data () {
return {

    };
},

}

子组件（任意后代）：

export default {
name:‘appChild’,
inject:[‘app’],
data () {
return {

    };
},
methods:{
    fn(){
        // 获取到app.vue的整个实例  想要什么拿就完事了
        // 比如app上有个属性name,  this.app.name 就能拿到
        console.log(this.app)
    }
}

}

五、provide inject的非父子传值

1. 上面直接父组件provide，子组件inject方法适用于父子组件之间，如果是非父子就要借用中间人app.vue,中间人app.vue将自己的实例provide进去
2. 在传值的一方用emit（触发自定义事件），在接受值的一方用on监听事件

完整例子：

app.vue

export default {
name:‘app’,
provide(){
return {
//将当前的app.vue的实例分享出去
‘app’:this
}
},
data () {
return {

    };
},

}

传值的组件：

export default {
name:‘sister’,
inject:[‘app’],
data () {
return {
val:‘我是sister的值’
};
},
methods:{
emit(){
//注册自定义事件
this.app.$emit(‘custom-event’,this.val)
}
}
}

接收值的一方：

export default {
name:‘brotherChild’,
inject:[‘app’],
data () {
return {

    };
},
//在实例创建后监听自定义事件
created(){
    this.app.$on('custom-event',function(msg){
        console.log(msg)//输出结果 我是来自sister的值
    })
}

}

如果不想用app.vue作为中间人，也可以在main.js文件中新建一个vue实例，export出去

完整例子：

main.js

export const eventBus = new Vue()

传值组件：

import {eventBus} from ‘main.js’
export default {
name:‘sister’,
data () {
return {
val:‘我是sister的值’
};
},
methods:{
emit(){
//注册自定义事件
eventBus.$emit(‘custom-event’,this.val)
}
}
}

接收组件：

import {eventBus} from ‘main.js’
export default {
name:‘brotherChild’,
data () {
return {

    };
},
//在实例创建后监听自定义事件
created(){
    eventBus.$on('custom-event',function(msg){
        console.log(msg)//输出结果 我是来自sister的值
    })
}

}

六、$parent $refs $children父子传值

1. parent（）方法是在子组件中可以直接访问该组件的父实例或组件，ref( )可以用来访问子组件中的数据

父组件


<button @click = " handleRef ">

子组件

<button @click = ’ handleCrease '>

七、用name传递参数

1. 在路由文件src/router/index.js里面配置name属性

routes: [
{
path:’ /Message ',
name: ’ Message ',
component: resolve = > require( [ …/components/page/Message.vue ], resolve )
}
]

2. 在传值页面写法：
   
   <button @click = ’ meaaBtn '>
   
   data( ) {
   return {
   massageInfo: [ ]
   }
   },
   methods( ) {
   meaaBtn ( ) {
   this.$router.push( { ’ Message ', params: { listInfo: this.massageInfo } } )
   }
   }

注意：push的时候的Message是要跳转的页面；
params的格式是key value，key的名字可以随便取，接受的页面要用到；后面value是你要传递的值

3. 在接收的页面写
   data( ) {
   messageInFo :[ ’ 1 ’ ]
   },
   methods:{
   this.messageInFo = thia.$route.params.listInfo
   }

八、通过 标签中的to传参

1. valueString

注意：to前面带冒号，后面跟的是对象形式的字符串

name就是我们在路由配置文件中起的name值
params就是我们要传的参数，也是对象形式，在对象里面可以传递多个值

2. 在接受的组件中用$route.params.username进行接收

九、使用vuex进行数据传递

1. index.js文件

import Vue from ’ vue ’
import Vuex from ’ vuex ’
import mutations from ’ ./mutations ’
import actions from ’ ./actions ’
import getters from ’ ./getters ’
Vue.use( Vuex )
const state = {
order: { }
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})

getters.js文件
export default {
// 声明order的方法
getOrder ( state ) {
return state.order
}
}

mutations.js文件

export default {
// 设置order的值
SET_ORDER（ state， order ）{
state.order = order
}
}

在页面设置中调用set方法设置全局的order值
this.$store.commit( ’ SET_ORDER ', order )

获取全局的order值
let template = this.$store.state.order

十、session storage缓存的形式进行传递

在A组件中缓存orderData

const orderData = { ’ orderId ': 123, ’ price ‘: 88 }
sessionStorage.setItem(’ 缓存名称 ', JSON.stringify( orderData ))

在B组件就可以获取A中的缓存

const dataB = JSON.parse(sessionStorage.getItem(‘缓存名称’))