1.子组件通过props接收父组件中的值,插入子组件中会跟随父组件而变化。
用法:
父组件中,引入子组件时,通过:key=''的方式传入,eg:
<children :myKey='父组件传入的值' ></children>
子组件中,通过props接收,eg:
props: {
myKey: String
},
created(){
console.log(this.myKey,'父组件传入的值')
}
2.子组件修改父组件的值,可以使用自定义事件和$emit:
①父组件中,引入子组件时,自定义事件,eg:
<children @myEvent="fatherGet()" ></children>
②子组件中,使用this.$emit('myEvent','子组件修改的值'),进行参数的传出;eg:
methods(){
change(){//修改父组件传参的场景
this.$emit('myEvent','子组件修改的值')
}
}
③父组件中,methods下的fatherGet函数即可接受参数的传入;
methods(){
fatherGet(data){
console.log('myEvent被触发了,携带的data是:',data,'<---子组件修改的值')
}
}
3.非父子组件传参,跨级或同级组件传参时;通过引入新的Vue对象,结合$emit和$on传参,类似2的用法,不过两个组件均需引入同一个Vue对象;
用法:基于非父子关系的组件A和组件B;
①创建一个到处Vue对象的js:
import Vue from 'vue'
const BUS = new Vue()
export default BUS
②在组建A中引入BUS,通过$on接收参数
//位于组件A
import BUS from './BUS.js'
BUS.$on('myEvent', (data) => {
//这里data可以接收B组件的传参
})
③在组件B中引入BUS,通过emit传出参数
//位于组件A
import BUS from './BUS.js'
BUS.$emit('myEvent', data)//这里data是要给组件A的传参
4.通过sessionStorage或者localStorage,在一处存入变量,在另一处取出或者修改变量;