props传值

我胡为喜呀

已于 2024-01-20 09:50:47 修改

阅读量796

点赞数 11

文章标签：前端开发语言 vue.js

于 2024-01-20 09:49:30 首次发布

本文链接：https://blog.youkuaiyun.com/xu1912715645/article/details/135705939

版权

文章目录

props用于父组件向子组件传递数据，从而实现组件之间的通信。
以下是使用props的详细步骤：
父组件中定义 props：在父组件中，通过在子组件的标签上添加属性来定义要传递的数据。这些属性就是props。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

2、子组件中接收 props：在子组件中，通过在组件的 props 选项中声明需要接收的属性，来接收从父组件传递过来的数据。

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

<script>
export default {
  props: {
    message: String,
  },
};
</script>

上述例子中，ChildComponent 子组件接收一个名为 message 的 prop，它的类型为字符串（String）。

父组件传递数据给子组件：在父组件中，通过在子组件的标签上使用 v-bind（或简写为 :）指令，将数据传递给子组件。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

在这个例子中，parentMessage 是父组件中的数据，通过:message="parentMessage"将其传递给了子组件。

总体来说，props 是一种非常简单而有效的方式，用于实现父子组件之间的数据传递。在实际应用中，可以传递各种类型的数据，包括基本类型、对象、数组等。