vue组件间通信、数据传递（父子组件，同级组件）

vue组件之间通信

组件目录结构

父组件 app.vue

<template>
<div id="app">
<h1>{{title}}</h1>
<p>用户名: <span>{{username}}</span></p>
<p>密码: <span></span>{{password}}</p>
<page1 :text="text" @outPutName="getUserName"></page1>
<page2 :text1="text1" @outPutPassWord="getPassword"></page2>
</div>
</template>

<script>
import Page1 from './components/page1'
import Page2 from './components/page2'
export default {
name: 'app',
components:{
'page1':Page1,
'page2':Page2
},
data(){
return{
title:'vue组件传值',
text:'参数1',
text1:'参数2',
username:'',
password:''
}
},
methods:{
getUserName:function (msg) {
this.username = msg;
},
getPassword:function (msg) {
this.password  = msg;
}
}
}
</script>

子组件 page1.vue

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{text}}</h2>
<input type="text" @change="setUserName" v-model="username" placeholder="请输入用户名">
</div>
</template>

<script>
export default {
name: 'hello',
props:['text'],
data () {
return {
msg: '世界',
username:''
}
},
methods:{
setUserName:function () {
this.$emit('outPutName',this.username);
}
}
}
</script>

子组件 page2

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3>{{text1}}</h3>
<input type="text" v-model="password" @change="outPutPassword"  placeholder="请输入密码">

</div>
</template>

<script>
export default {
name: 'hello',
props:['text1'],
data () {
return {
msg: '你好',
password:''
}
},
methods:{
outPutPassword:function () {
/*$emit 提交自定义事件*/
this.$emit('outPutPassWord',this.password);
}
}
}
</script>

通信过程介绍

父组件向子组件传值

父组件中

import Page1 from './components/page1'
export default {
name: 'app',
components:{
'page1':Page1
}
```
import引入子组件，并在**components** 中注册组件
<page1 :text="text"></page1>
在父组件中使用子组件

通过`v-bind`绑定一个**text**属性（这个属性名任意取），并且给这个属性赋需要向子组件中传递的值

子组件page1 中

<div class="hello">
<h2>{{text}}</h2>
</div>

export default {
name: 'hello',
props:['text'],
data () {
}

通过props属性接受父组件v-bind绑定的text，在

{{text}}

便可以使用从父组件中接受到的值了。

子组件向父组件中传值

子组件page1中

<input type="text" @change="setUserName" v-model="username" placeholder="请输入用户名">

export default {
name: 'hello',
props:['text'],
data () {
return {
msg: '世界',
username:''
}
},
methods:{
setUserName:function () {
this.$emit('outPutName',this.username);
}
}
}

在data中，定义一个username属性

通过

v-on

绑定一个

setUserName

方法，

v-model

将定义的username和dom做双向数据绑定，在

methods

中，通过

this.$emit

绑定一个

outPutName

的事件，并将username的值传递出去。

在父组件 app.vue中

<page1 :text="text" @outPutName="getUserName"></page1>

methods:{
getUserName:function (msg) {
this.username = msg;
}
}

在input上绑定一个事件，事件名

outPutName

为子组件page1.vue中通过

this.$emit

注册的事件，并给这个事件绑定一个方法

getUserName

用了接收子组件传递过来的数据。

在

data

中定义一个

username

属性来保存子组件传递的值，并通过

v-model

将这个值绑定到父组件的dom元素上

同级组件传值

同级组件不能直接传值，需要一个中间桥梁，可以先将数据传递给公共的父组件，然后父组件再将数据传递给需要的子组件。

定义一个公共文件

eventBus.js

,代码很简单(就2句)，只是创建一个空的vue实例

import Vue from 'vue'
export default new Vue()

在需要通信的同级组件中分别引入

eventBus.js

文件

在page1.vue 中，

<input type="text" @change="setUserName" v-model="username" placeholder="请输入用户名">
bus.$emit('addCart', this.data)
在setUserName 方法中，通过vm.$emit 触发<code>addCart</code> 方法，并将需要传递的数据<code>this.data</code> 传入。

```
```
在page2.vue 中，
mounted(msg) {
bus.$on('addCart', (msg) => {
this.dom = msg
console.log(this.dom)
})
}

在方法中，通过vm.$on 监听

addCart

方法，并获取传递过来的参数，从而实现了同级组件间的通信

一般复杂的应该推荐使用Vuex来管理组件之间的通信

以上是自己在学习vue中遇到组件通信，并做出的一些总结，写的很粗糙，后面继续学习改进……