vue数据传递

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

 

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

父组件

<template>
  <div>
    <h1>I am The Parent</h1>
    <Child v-bind:msg="message"/>
  </div>
</template>

<script>
import Child from './Child';

  export default {
    name:'Parent',
    components: {Child},
    data(){
      return {
        message:'i am in The Child & i am from The Parent'
      }
    }
  }
</script>

子组件

<template>
  <div>
    <h2>I am The Child</h2>
    <ul>
      <li>{{msg}}</li>
    </ul>
    <button v-on:click="change">click to change The data</button>
  </div>
</template>

<script>
  export default {
    name:'Child',
    props:['msg'],
    methods:{
      change(){
        this.msg="the data chenged";
      }
    }
  }
</script>

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

 

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

父组件

  <Child v-bind:msg="message" v-on:pass="getData"/>
      …………
   methods: {
      getData(data) {
        alert("The data from Child is" + data);
      }
    }

子组件

 <button v-on:click="change">click to change The data</button>
    …………
  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