Vue组件通信的几种方式

weixin_45815973

于 2022-11-13 23:03:30 发布

阅读量217

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45815973/article/details/127834327

版权

Vue组件通信的几种方式

1、最简单的父子组件传值

1、父传子

<father>
    <son :子组件props数组或对象中的名字="data">//这里的：只用于将data识别为js表达式
    </son>
</father>

data:{
    name:lisi;
    age:12;
}

<div>
    <h5>{{data.name}}</h5>  //子组件中使用props对应的名字接收并使用
</div>
props:['data']

2、子传父

主要的方法为：儿子通过this.$emit(‘父组件中的方法’,子组件中的数据)方法区触发父组件在子组件上自定义的事件，进而根据事件绑定一个处理函数，父组件中的方法会收到子组件中使用emit传递过去的参数。

父组件中：
<father> 
	<son @子组件emit中指定的事件名="父组件处理方法"> </son>    
</father>

method:{
    父组件处理方法(子组件传递过来的参数){
	}
}

子组件：
<div>
	<input type="button" @Click="sendData"> //触发发送方法    
</div>
data(){
    return:{
        data:{
            name:lisi;
            age:12
        }
    }
}
method:{
    sendData(){
        this.$emit('父组件中自定义的事件',this.data.data);
	}
}