vue props例子

Vue.js中的Props（属性）是父组件向子组件传递数据的一种机制，它允许父组件将数据作为配置提供给子组件，并确保数据的一致性和可复用性。这里是一个简单的Vue Props的例子：

<!-- 父组件 App.vue -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

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

在这个例子中，`parentMessage`是一个props，我们使用冒号(`:`)将其标记为props，然后在`<child-component>`标签中传递给子组件。

<!-- 子组件 ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    // 定义接受的prop名称和默认值
    message: {
      type: String, // 数据类型
      default: 'Default message' // 默认值
    }
  }
}
</script>

子组件通过`props`对象定义了它期望从父组件接收哪些数据。当父组件的数据发生改变时，通常不需要手动通知子组件更新，因为Vue会自动进行更新。