1,父到子
父组件A
<A :msg='msg'></A>
子组件B
<B>{{msg}}</B>
props:['msg']
简单来说就是父组件定义一个属性,并且给到对应的值,子组件通过prop拿到这个属
性之后直接使用
2.子到父
子组件A
<A @click='chufa'></A>
methods:{
chufa(){
this.$emit('hehe','子组件需要传给父组件的值')
}
}
父组件B
<B @hehe='haha'></B>
methods:{
haha(arg){
console.log(arg,'拿到了子组件传过来的值')
}
}
简单的来说就是父组件直接注册一个方法,子组件此时用this.$emit()来触发父组
件注册的方法,并且放入自己要传入的值,此时父组件即可拿到需要的值
3.兄弟组件传值
兄弟组件传值方法可以用父组件中转,也可以用中央事件总线Bus,Bus的原理简单来
说就是申明一个vue实例,用它来传递信息,可以创建一个bus.js文件,内容如下:
import Vue from "vue";
let Bus = new Vue();
export default Bus;
然后在兄弟组件A还有B中都导入bus.js。
此时如果是组件A需要传递信息给组件B
那么在组件B中申明一个方法this.$on('chuandi',(arg) => {console.log(arg,'拿到了')})
A组件this.$emit('chuandi','需要传递的值'),触发B组件注册的方法,并且把值传
递过去即可,此时A通过回调拿到传递的值