vue 组件间数据传递

父组件向子组件传值

方法一：

子组件想要使用父组件的数据，需要通过子组件的 props 选项来获得父组件传过来的数据。

 1.父组件parent.vue中代码：

<template>
    <div class="app">
        // message 定义在子组件的 props 中
        <child :message="msg"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                msg: 'Hello world'
            }
        }
    }
</script>

2.在子组件 child.vue 中的 props 选项中声明它期待获得的数据

<template>
    <span>{{message}}</span>
</template>
<script>
    export default {
        // 在 props 中声明获取父组件的数据通过 message 传过来
        props: ['message']
    }
</script>

方法二 ：

使用$children可以在父组件中访问子组件。

用法：

this.$childen.xxx

方法三：

父组件直接获取子组件的数据（this.$refs.ref的名字.变量）

// 假设我们要获取子组件<son></son>的数据target
// 第一：子组件son要设置ref
<son ref="sonComponent"></son>
// 第二：用下面的语句去获取，修改子组件的值
console.log(this.$refs.sonComponent.target); // 取值
this.$refs.sonComponent.target = '1'; // 修改值

子组件向父组件传值

方法一：

1、给子组件child.vue绑定要发生改变的事件，通过 this.$emit 方法

<template>
    <div class="form-group">
          <div class="form-control">
                <a data-v-c99171e2="" href="javascript:;" @click="refreshTotalCountData" class="btn btn-primary query-btn">查询</a>
          </div>
    </div>
</template>
<script>
　　export default {
        data(){
        },
        methods: {
            async refreshTotalCountData(){        
                  var setData = "hello world!"
                  this.$emit('transferData', setData);    //'transferData' 自定义函数；'setData' 传递的数据
            },
        }
　　}
</script>

  

2、父组件parent.vue接收子组件child.vue传过来的数据

<template>
    <div id="parents">
        <tool-bar @transferData="getDate"></tool-bar>
　　　　　<div>{{msg}}</div>　　// 123 ;当点击子组件按钮时，父组件就会发生改变  ‘hello world！’
    </div>
</template>
 <script>
　　import child from './child.vue';
    export default {
        data(){
            return{
                msg:'123'
            }
        },
        methods: {
                getDate(setData) {        
                     this.msg = setData;
            },
        }
    }
</script>

方法二：

子组件直接用this.$parent.xxxx这样直接调用父组件的方法。

方法三：

 也可以使用 v-model 方式来直接绑定父组件变量，把数据从子组件传回父组件。

父组件：

<template>
  <div id="app">
    <p id="show">总数：{{total}}</p>
    <Child v-model="total"/>
  </div>
</template>

<script type="text/javascript">
import Child from "./components/Child";
export default {
  components: {
    Child
  },
  data() {
    return {
      total: 0
    };
  }
};
</script>

子组件：

<template>
  <div class="child">
    <button @click="click">+1</button>
  </div>
</template>

<script>
export default {
  name: "Chlid",
  data() {
    return {
      count: 0
    };
  },
  methods: {
    click: function() {
      this.count++;
      this.$emit("input", this.count);
    }
  }
};
</script>

非父子组件间数据传递

方法一：

创建一个空的 Vue 实例作为中央事件总线，实现非父子组件之间的通信。

Vue内部有一个事件机制，可以参考源码。

$on方法用来监听一个事件。

$emit用来触发一个事件。

1.先定义一个新的bus.js文件，作为中间桥梁

import Vue from 'vue';

export var bus = new Vue();

2.在被传值页面（如：A.vue）进行引入bus.js文件，通过$emit触发

import Bus from './bus.js' 
export default { 
    data() {
        return {
            message: ''"
        }
     },
　　methods: {
       bus () {
          Bus.$emit('msg', '传给兄弟组件们，你收到没')
       }
    }
}

3.在要和$emit通信的另外一个组件（如：B.vue）中添加监听msg事件

import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''
      }
    },
    mounted() {
       Bus.$on('msg', (e) => {
           this.message = e;
　　　      console.log(`传来的数据是：${e}`);
       })
     }
   }

这样我们就实现了非父子组件间的数据传递了

方法二：

如果项目较大，那么可以使用具有状态管理的 vuex

方法三：

可以使用element组件中的from标签进行数据传递。