Vue组件的常用通信方式(一)

组件是vue中最强大的功能之一,在vue项目中,经常需要解决各个组件之间数据通信的问题。因此掌握好vue组件的常用通信方式,是学好vue的必经之路,也是vue项目开发必不可少的核心技能之一。
要掌握vue组件的常用通信方式,首先得了解vue组件之间的关系,根据组件之间的关系选择合适的通信方式。
上图很好的阐述了vue组件的对应关系,包含父子关系、兄弟关系、隔代关系等。
今天我们就先从父子组件之间的通信方式开始。

一、父组件向子组件传值(父组件 => 子组件)

父组件通过props向子组件传值。接下来我们将通过一个小例子,查看具体的实现过程。
1、父组件home.vue引入子组件homeList
<template>
    <div>
      <home-list :list="iconList"></home-list>
    </div>
</template>

<script>
import HomeList from './components/list'
export default {
  name: 'Home',
  components: {
    HomeList
  },
  data () {
    return {
      iconList: ['昨天', '今天', '明天']
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
2、父组件定义一个数组iconList,并在子组件上绑定list属性(list可以改成其他属性,比如test),将iconList的值传入

<home-list :list="iconList"></home-list>
3、在子组件homeList.vue中props接受父组件传递过来的值。props中的list必须与父组件绑定的list保持一致,这里的Array表示父组件传递过来iconList的数据类型,数据类型必须正确。
<template>
  <div>
    <div v-for="item of list" :key="item.id">{{item}}</div>
  </div>
</template>

<script>
export default {
  name: 'HomeList',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
</style>
4、完成以上步骤后,子组件就应该已经接收到父组件传递过来的数据了,保存在list中,这时通过v-for即可将数据循环出来

效果如下

二、子组件向父组件传值(子组件 => 父组件)

子组件通过$emit向外触发事件,父组件通过v-on监听子组件触发的事件。接下来我们将通过一个小例子,查看具体的实现过程。
1、父组件vue引入子组件homePath.vue
<template>
    <div>
      <div>{{titleInfo}}</div>
      <home-path></home-path>
    </div>
</template>

<script>
import HomePath from './components/path'
export default {
  name: 'Home',
  components: {
    HomePath
  },
  data () {
    return {
      titleInfo: []
    }
  }
}
</script>

<style scoped>
</style>
2、父组件定义空数组titleInfo,用于存放子组件的数据,将titleInfo插入到需要渲染的DOM结构中
3、子组件在需要向外触发事件的DOM节点上绑定click事件,事件名为changeTitle
<template>
    <div>
      <span @click="changeTitle">Click</span>
    </div>
</template>

<script>
export default {
  name: 'HomePath',
  data () {
    return {
      pathInfo: ['梦想啊', '青春啊', '未来啊', '人生啊']
    }
  },
  methods: {
    changeTitle () {
      this.$emit('titleChanged', this.pathInfo)
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
4、在子组件的methods属性中定义changeTitle方法,在changeTitle方法内部通过$emit向外触发事件,事件名为titleChanged,参数pathInfo为传递的数据
5、在父组件中通过v-on监听事件子组件向外的触发事件titleChanged,updateTitle为数据处理函数
<template>
    <div>
      <div>{{titleInfo}}</div>
      <home-path v-on:titleChanged="updateTitle"></home-path>
    </div>
</template>
6、父组件的methods属性中定义updateTitle方法,进行数据处理
methods: {
  updateTitle (e) {
    this.titleInfo = e
  }
}
7、完成以上步骤后,父组件就应该已经接收到父组件传递过来的数据了。
效果如下
总结:父子组件之间的通信分两种情况
1、父 => 子:父组件通过props向子组件传值
2、子 => 父:子组件通过$emit向外触发事件,传递参数,父组件通过v-on监听子组件触发的事件,接收参数
关于父子组件之间的通信今天就介绍到这里,下期将介绍关于兄弟组件之间的通信方式。