Vue2-$props传值操作

在 Vue.js 中，父组件可以通过属性方式向子组件传递数据，子组件则可以通过 $props 属性轻松接收这些属性值。在 Vue 2 中，父组件可利用 v-bind 指令或简写的冒号语法将数据传递给子组件。而子组件只需在 props 选项中声明需要接收的属性名，便可通过 $props 属性便捷地获取这些属性值，实现父子组件之间的数据传递。

示例一：父子组件之间的传值

在这个示例中，展示了父组件（Parent）和子组件（Child）之间的数据传递。首先父组件通过属性将数据 parentMessage 传递给子组件，之后子组件接收并显示这个数据，由此实现了父子组件之间的数据传递。

<!-- Parent.vue -->
<template>
  <Child :message="parentMessage" />
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      parentMessage: "Message from Parent",
    };
  },
  components: { Child },
};
</script>

<!-- Child.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ["message"],
  mounted() {
    console.log(this.$props);
    // 输出：{ message: "Message from Parent" }
  }
};
</script>

示例二：祖孙组件之间的传值

在这个示例中，展示了祖父组件（Grandparent）、父组件（Parent）和子组件（Child）之间的数据传递。首先，祖父组件通过属性将数据 grandparentMessage 传递给父组件。然后，父组件接收到这个数据并通过属性再传递给子组件。最终，子组件接收到数据并在页面上显示出来，由此实现了祖父、父、子组件之间的数据传递。

<!-- Grandparent.vue -->
<template>
  <Parent :attr1="grandparentMessage" />
</template>

<script>
import Parent from "./Parent.vue";

export default {
  data() {
    return {
      grandparentMessage: "Message from Grandparent",
    };
  },
  components: { Parent },
};
</script>

<!-- Parent.vue -->
<template>
  <div>
    <Child :attr1="attr1" :attr2="parentMessage" />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      parentMessage: "Message from Parent",
    };
  },
  props: ["attr1"],
  components: { Child },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ attr1 }}</p>
    <p>{{ attr2 }}</p>
  </div>
</template>

<script>
export default {
  props: ["attr1", "attr2"],
  mounted() {
    console.log(this.$props);
    /* 输出：
    { 
      attr1: “Message from Grandparent”, 
      attr2: “Message from Parent”, 
    }
    */
  },
};
</script>