Vue中模板之间的信息传递有一个专业名词叫组件通信

组件通信又分为

  1. 父组件向子组件的信息传递
  2. 子组件向父组件的信息传递

首先来看看父组件向子组件的传递信息:

　　 父组件向子组件传递信息,父组件要先向子组件暴露数据,具体就是

import videoShow from '../../wheel/videoShow/videoShow.vue'
data () {
  return {
    allVideos: []//给子组件需要暴露的数据
  }
}

　　子组件需要有个接收的参数:

export default {
  props: {//子组件接收数据时指定的参数
    allVideos: {
      type: Array,//声明数据的类型
      default: []
    }
  }
}

　　至于html模板

<template>
  <div class="video">
    <video-show :allVideos="allVideos"></video-show>
  </div>
</template>

　　

接着我们看看子组件向父组件的信息传递

　　对于子组件向父组件的信息传递叫事件分发(emit),具体做法就是:

　子组件:

　<template>
　　<header>

　　　<!-- 这个div就是分发事件给父组件 -->
　　　<div class="backIco"><img @click="backTopPage" src="../../../assets/body/myself/back.png"></div>

　　　<div class="title" v-text="headers[1]"></div>

　　　<div class="more" v-text="headers[2]"></div>

　　</header>
　</template>

<script>
export default {
  methods: {//这是写函数的位置
    backTopPage () {//方法名,es6写法(省去function)
      this.$emit('backMain')//事件分发给父组件
    }
  },
  props: {
    headers: {
      type: Array,
      default: []
    }
  }
}
</script>

　　接着就是到了父组件开始接收子组件传过来的信息

父组件:
<template>
  <transition name="tesk">
    <div class="goldTesk" v-if="isShow">
　　　　<!-- 下划线地方就是父组件接收子组件分发的事件 -->
      <back-header @backMain="backMine" :headers="headers"></back-header>
    </div>
  </transition>
</template>

<script>
import backHeader from '../wheel/backHeader/backHeader'//引入模板
export default {
  props: {//向下传递信息
    isShow: {
      type: Boolean,
      default: false
    },
    headers: {
      type: Array,
      default: []
    }
  },
  components: {//模板
    backHeader
  },
  methods: {//方法
    backMine () {
      this.$emit('goMine')//这是继续给父组件往上传的事件,其实对于这种多次向上传递事件或者向下传递信息可以利用  vue-stroe  解决,这个之后再写
    }
  }
}
</script>