vue子组件向父组件传值方法(vue常见的传值方式)(1)

1,父传子父组件:

<template> <div> <abnormal-warning :datas="3"></abnormal-warning> // 1子组件 </div> //多个子传一个父,变量一样就可以了,值随便传,其他不变 <abnormal-warning :datas="3"></abnormal-warning> // 子组件 <abnormal-warning :datas="4"></abnormal-warning> // 子组件 <abnormal-warning :datas="5"></abnormal-warning> // 子组件 </template> <script> import AbnormalWarning from '../../components/threshold/AbnormalWarning.vue' //2,引入子组件 export default { components:{ AbnormalWarning, // 3 注册子组件 }, } </script>

这里我在父组件中传了一个3过去,并且变量名是datas,子组件接收datas的值子组件:

export default { props:['datas'],// 1 子组件通过props接收,有多个都写在这个数组里面 mounted(){ console.log(this.datas) //打印看看datas的值 }

总结: 在父组件里面绑定一个变量传参到子组件,子组件通过props接收。2,子传父子组件:

vue子组件向父组件传值方法(vue常见的传值方式)(2)

通过事件绑定一个方法,在方法里面用this.$emit(“标记”,值),如果传多个值就用数组或者对象包裹即可,“标记”在父组件那里要一致,子组件怎么定义父组件就这么拿,父组件:

vue子组件向父组件传值方法(vue常见的传值方式)(3)

vue子组件向父组件传值方法(vue常见的传值方式)(4)

父组件里面在子组件上绑定一个方法,方法变量就是子组件那个标记,方法名就随便即可。代码就不复制了,自己敲两遍加深印象。3.兄弟之间的传值这里使用事件中央总线进行兄弟之间的传值1,在main.js中注册挂载全局的事件中央总线

// 事件中央总线 var bus = new Vue() Vue.prototype.$bus= bus;

2,兄弟A组件发送值

这里通过一个点击事件进行发送值,发送值用this.b u s . bus.bus.emit(),括号里面第一个参数是标记,等下兄弟B就是通过这个标记来接收值,第二个参数就是要发送的值,如果有多个就用数组或者对象包裹即可。

methods:{ sendData(){ this.$bus.$emit("sendNum",1); } }

3,兄弟B组件接收值

这里是一进兄弟B就要判断的,所有在mounted里面接收,也可以通过点击事件接收,一样的,接收值用this.b u s . bus.bus.on(),括号第一个参数就是上面发送时候的标记,第二个就是一个回调函数,接收A发送过来的值。

mounted() { this.$bus.$on("sendNum",(data)=>{ console.log(data); }) }

ok,以上就是vue常见的三种传值方法了,如有问题,欢迎留言。最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~

,