Vue组件之间数据交互与通信

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

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

在 Vue 中，可以使用 props 向子组件传递数据。

子组件部分：

如果需要从父组件获取 username 的值，就需要

props:{
   username:{
      type:String
   }
}

示例代码

<template>
  <div class="child01">
    my name is {{username}}
  </div>
</template>

<script>
export default {
  name: 'child01',
  props:{
    username:{
      type:String
    }
  }
}
</script>

在 props 中添加了元素之后，就不需要在 data 中再添加变量啦。

父组件部分：

示例代码

<template>
  <div class="child01">
      <child-box :username="zuobaiquan"></child-box>
  </div>
</template>

<script>
import childBox from './child.vue'
export default {
  name: 'child01',
  data () {
    return {
      zuobaiquan:'zuobaiquan'
    }
  },
  components:{
    'child-box':childBox
  }
}
</script>

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

一般情况下，子组件主要通过事件传递数据给父组件

子组件部分：

示例代码

<template>
  <ul class="tab-list">
    <li class="tab-li"
      v-for="(item, index) in tabItem"
      v-html="item"
      :class="{active: index === actIndex}"
      @click="handelSwitch(index)"
    >
    </li>
  </ul>
</template>

<script>
export default {
  name: 'child02',
  data(){
    return {
      tabItem:['选项一','选项二','选项三'],
      actIndex:0
    }
  },
  methods:{
    handelSwitch(index){
      this.actIndex=index;
      this.$emit("transferTabIndex",this.actIndex)
    }
  }
}
</script>

这是选项卡子组件，当tabItem的index值发生变化的时候，将对应的tab的索引index传递给父组件

首先声明一个了方法 handelSwitch，通过点击事件click来调用 handelSwitch,在 handelSwitch方法中，使用了 $emit 来遍历 transferTabIndex事件，并传递 this.actIndex，

其中 transferTabIndex是一个自定义的事件，功能类似于一个中转站，可以把this.actIndex通过这个事件传递给父组件

父组件部分：

在父组件parent.vue 中，声明了一个方法 getTabIndex，用 transferTabIndex事件调用 handelSwitch方法，获取到从子组件传递过来的参数 this.actIndex，传递过来的this.actIndex 可以实现选项卡的div模块的显示与隐藏。

　注意：

　　如果无需传递参数，直接写成 this.$emit(方法名)；

　　如果是一个参数，直接以追加参数即可；

　　如果是多个参数，直接对象形式或者数组格式传递。

示例代码

<template>
  <div class="child02">
      <child-box @transferTabIndex="getTabIndex"></child-box>
      <div v-show="showIndex==0">我的选项卡1</div>
      <div v-show="showIndex==1">我的选项卡2</div>
      <div v-show="showIndex==2">我的选项卡3</div>
  </div>
</template>

<script>
import childBox from './child.vue'
export default {
  name: 'child02',
  data () {
    return {
      showIndex:0
    }
  },
  components:{
    'child-box':childBox
  },
  methods:{
    getTabIndex(index){
      this.showIndex=index;
    }
  }
}
</script>