Vue：父子组件之间的通信

发表于 分类于

父子组件之间的通信方式：

  • 父组件通过props向子组件传递数据；
  • 子组件通过事件向父组件发送消息。
一、父组件向子组件传递数据

  1. 在子组件模板中的props中定义需要传值的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const cpn = {
      template: '#cpn',
      props: {
        cmessage: {
          type: String,
          default: 'default message',
          requird: true // 设置是否必传
        }，
        cmovies: {
          type: Array,
        	default:() =>[]
        }
      }
    }

  2. 在组件模板中调用自己的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <template id="cpn">
      <div>
        <p>{{ cmovies }}</p>
        <!-- 循环遍历父组件中传递过来的数据 -->
        <ul>
          <li v-for="item in cmovies">{{ item }}</li>
        </ul>
        <h2>{{ cmessage }}</h2>
      </div>
    </template>

  3. 在父组件中调用子组件，使用v-bind将父组件的值传递给子组件

    1
    2
    3
    <div id="app">
    	<cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
二、子组件向父组件发送消息
  1. 在子组件中，通过$emit()来触发事件
  2. 在父组件中，通过v-on来监听子组件事件
1
2
3
4
5
6
7
8
9
10
11
<!-- 父组件模板 -->
<div id="app">
	<cpn @itemclick="cpnClick(item)"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn">
  <div>
    <button v-for="item in cartegories" @click="btnClick(item)">{{ item.name }}</button>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 子组件
const cpn = {
  template: '#cpn',
  data() {
    return {
      cartegories:[
        { id: 'a', name: '热门推荐' },
        { id: 'b', name: '手机数码' },
        { id: 'c', name: '家用家电' },
        { id: 'd', name: '手机办公' },
        { id: 'e', name: '精选服饰' },
      ]
    }
  },
  methods: {
    btnClick(item) {
      // 向父组件中发射自定义事件,及传递的参数
      this.$emit('itemclick', item)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// 父组件
const app = new Vue({
  el: '#app',
  components: {
    cpn
  },
  methods: {
    // 父组件事件
    cpnClick(item) {
      console.log(item);
    }
  }
})