vue 2.x之组件的数据传递（一）-优快云博客

本文详细介绍了Vue中父组件向子组件、子组件向父组件及兄弟组件间的数据传递方法。包括使用props传递数据、通过$emit触发事件及利用eventBus实现非父子组件间的数据交互。

这是根据官方提供的脚手架vue-cli搭建，通过简单的案例来介绍vue数据的传递的方式，根据自己平时用到的，来做简单的总结；

1.父组件传递数据给子组件

父组件传递数据给子组件，需要把子组件引入，并挂载到当前父组件的vue实例上，这样父组件就能访问到该组件。子组件上自定一个方法来作为传的桥梁，在子组件上使用props来接收数据；

父组件：

 1 <template>
 2   <div class="hello">
 3     <child-comp v-bind:send-info='sendInfo'></child-comp>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 //引入子组件
 9 import  childComp  from  './son';
10 export default {
11   name: 'father',
12   data () {
13     return {}
14  }, 15  computed:{ 16 //需要传递的信息 17  sendInfo(){ 18  let sendSonInfo; 19 sendSonInfo ={ 20 age:'18', 21 name:'zhangsan' 22  }; 23 return sendSonInfo; 24  } 25  }, 26 //挂载到vue的实例上 27  components:{ 28  childComp 29  } 30 } 31 </script>

子组件:

<style type="text/css"></style>
<template>
    <div class="son">
        <div class="name">
            {{sendInfo.name}}
        </div>
        <div class="age">
            {{sendInfo.age}}
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name:'son',
        data(){
            return {} }, props:{ //子组件接收父组件传递来的数据  sendInfo:{ type:Object, //传递的数据类型 required:true, //是否必须 default:{} //默认传递类型  } } } </script>

在父组件中引入子组件，使用v-bind（缩写：）动态绑定组件prop到表达式；

在子组件中使用props来接收传递过来的数据；

2.子组件传递给父组件数据

既然父组件能传递数据给子组件数据，那么子组件也要能出传递数据给父组件，同样也要在父组件引入，挂载，同时要定义一个方法来接收子组件传递来的数据，而子组件通过 $emit 来实现数据传递；第一个参数是父组件定义的方法名，第二个参数是要传递的数据，可以是字符串，Boolean，对象，数组等；

子组件：

<style type="text/css"></style>
<template>
    <div class="son"></div>
</template>
<script type="text/javascript">
    export default {
        name:'son',
        data(){
            return {}
        },
        mounted(){
            this.$emit('get-info','我是子组件传递来的数据');
        }
    }
</script>

父组件:

<template>
  <div class="hello">
    <child-comp v-on:get-info='getInfo'></child-comp>
    <div>{{data}}</div>
  </div>
</template>

<script>
//引入组件
import  childComp  from  './son';
export default {
  name: 'father',
  data () {
    return {
      data:'' // 定义变量来接收子组件传递来的数据
    }
  },
  methods:{
  //接收子组件传递来的数据
 getInfo(val){ this.data = val; } }, //挂载到vue的实例上  components:{ childComp } } </script>

父组件接收子组件数据，用v-on（缩写@）绑定事件监听器。

3.兄弟组件的数据传递

在父子组件数据的传递的过程，还有兄弟组件的数据传递。兄弟组件的传递需要借助于一个空的vue实例来实现，如果传递的数据量不大，可以用此方法，如果大量数据的传输，要使用vuex来实现数据的传递。下面实例来展示非vuex方式的兄弟组件的数据传递；

在main.js里的实例上挂载一个空的vue实例，来作为兄弟组件数据传递的桥梁

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>', components: { App }, data:{ eventBus:new Vue() //创建eventBus的vue实例，作为桥梁  } })

2.在父组件中引入兄弟组件

<template>
  <div class="hello">
    <child-comp></child-comp>
    <brother-comp></brother-comp>
  </div>
</template>

<script>
//引入组件
import  childComp  from  './son';
import  brotherComp from './brother';
export default {
  name: 'father',
  data () {
    return {}
  },
  components:{
    childComp,
    brotherComp
  }
}
</script>

3.在组件里添加方法和要传递的数据

<style type="text/css"></style>
<template>
    <div class="son">
        <input type="button" name="" value="确定" @click='sendInfo'>
    </div>
</template>
<script type="text/javascript">
    export default {
        name:'son',
        data(){
            return {}
        },
        methods:{
            sendInfo(){
                this.$root.eventBus.$emit('sendBrotherinfo','我是兄弟组件');
            }
        }
    }
</script>

4.在兄弟组件里接收传来的数据

<template>
    <div class="brother">
        <div>{{data}}</div>
    </div>
</template>
<script type="text/javascript">
    export default{
        name:'brother',
        data(){
            return {
                data:'' //声明变量来接收
            }
        },
        created(){
            this.$root.eventBus.$on('sendBrotherinfo', val =>{ console.log(val); this.data = val; }); } } </script>

以上组件只能实现单个页面，不同组件的数据传递，如果想要在不同页面的数据传递，这就要借助于vuex来实现，下一篇来介绍vuex和使用vuex进行数据传递；

转载于:https://www.cnblogs.com/wxb-it/p/7590681.html