一. 父组件向子组件传值

$children
需要指定子组件的下标（第几个子组件）

例：将第一个子组件的cInfo属性值改为 c2

this.$children[0].cInfo = "c2";
1

二. 子组件向父组件传值

$parent

例：将父组件的fInfo属性值改为 f2

this.$parent.fInfo = "f2";
1

三. 父子之间传值实例

父组件

<template>
  <div>
    <h3>父组件</h3>
    <p>收到子组件数据：{{ fInfo }}</p>
    <button @click="setChildInfo">向子组件传值</button>
    <hr />
    <h3>子组件</h3>
    <child></child>
  </div>
</template>

<script>
//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {
      fInfo: "f1"
    };
  },
  methods: {
    // 向子组件传值
    setChildInfo() {
      // 需要指定子组件的下标（第几个子组件）
      this.$children[0].cInfo = "c2";
    }
  }
};
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

子组件

<template>
  <div>
    <p>收到父组件数据：{{ cInfo }}</p>
    <button @click="setParentInfo">向父组件传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cInfo: "c1"
    };
  },
  methods: {
    // 向父组件传值
    setParentInfo() {
      this.$parent.fInfo = "f2";
    }
  }
};
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25