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