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中遇到组件通信，并做出的一些总结，写的很粗糙，后面继续学习改进……