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 是一种非常简单而有效的方式，用于实现父子组件之间的数据传递。在实际应用中，可以传递各种类型的数据，包括基本类型、对象、数组等。