vue数据传递

vue是单向数据流，能够直接将父组件的数据传递给子组件，但是，总会需要其他的数据传递方式

 

一、父组件向子组件传递数据

父组件

子组件

## 子组件通过props获得父组件传递的数据，其中可以通过this.msg进行获取并，但是建议对props进行修改，vue会进行报错。

 

二、子组件向父组件进行传递数据

父组件

  
      …………
   methods: {
      getData(data) {
        alert("The data from Child is" + data);
      }
    }

子组件

 click to change The data
    …………
  methods:{
      change(){
       this.$emit('pass','嘿嘿嘿');
      }
    }

## 父组件通过监听 pass事件，当子组件触发事件时将数据进行传递

 

三、子组件给子组件传递数据

• 方法一：vue Bus

创建空的vue实例

import Vue from 'vue';
const  Bus = new Vue();
export default Bus;

子组件

import Bus from './bus';

//监听事件的组件
created() {
      Bus.$on('addTasks', (task) => {
        this.tasks.push(task);
      });
    }

//触发事件的组件
  methods:{
      addTask() {
        Bus.$emit('addTasks',{content: this.newTask, isFinished: false});
          ……
      }
    }

• 方法二：vuex(vue的状态管理库)

参考链接：
https://juejin.im/entry/5a14d23d6fb9a044fa197ebb
http://www.cnblogs.com/wisewrong/p/6266038.html
https://segmentfault.com/a/1190000012808179
https://www.cnblogs.com/fanlinqiang/p/7756566.html
https://www.jianshu.com/p/744109395a95