Vue - 父子组件之间传值（$parent、$children）

一. 父组件向子组件传值

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

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

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

二. 子组件向父组件传值

$parent

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

this.$parent.fInfo = "f2";

三. 父子之间传值实例

父组件

<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>

子组件

<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>