vue组件之间互相传值:父子传值/父传子 子传父/兄弟组件传值

Vue2.0 传值方式

在vue的框架开发项目中,经常会用到组件来管理不同的功能,这时会出现多个页面或者组件来回传值,共同同个变量的问题。现在就给大家介绍vue开发中常用的三种传值方式:

1.父传子:

在父组件的子组件标签上绑定一个自定义属性,在自定义属性上挂载需要传递的变量。vue组件之间互相传值:父子传值/父传子 子传父/兄弟组件传值_第1张图片

在子组件中的props里来接收数据,props里的数据可以是数组也可以是对象,接收的数据可以用props:[ '传递的属性名' ] 或者 props:{ 属性名:数据类型 } 来接收。

vue组件之间互相传值:父子传值/父传子 子传父/兄弟组件传值_第2张图片

2. 子传父

在子组件里通过this.$emit 向父组件传递事件。第一个参数是传递的事件名,第二个参数是传递的变量。

vue组件之间互相传值:父子传值/父传子 子传父/兄弟组件传值_第3张图片

在父组件的子组件标签上绑定自定义事件,并接收子组件传送过来的事件。这时就可以直接在父组件页面的methods里定义自定义事件了。

 3.兄弟组件

通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”,传递的参数信息)发送,在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件

在main.js写:export const EventBus=new Vue()

在发送事件的一方引入:import {EventBus} from "./main.js"

然后写:EventBus.$emit("editAge",this.age)

在接收事件的一方引入:import {EventBus} from "./main.js"

然后写:export const EventBus=new Vue()

create(){

EventBus.$on("editAge",(age)=>{

this.age=age;

});

你可能感兴趣的:(vue,组件传值,vue.js,前端,javascript)