vue3.0中的 props是做什么用的举例说明

在Vue 3.0中，props用于在父组件向子组件传递数据。通过props，父组件可以将数据传递给子组件，子组件可以接收并使用这些数据。

举个例子，假设有一个父组件`ParentComponent`和一个子组件`ChildComponent`，父组件通过props传递数据给子组件。

// 父组件
const ParentComponent = {
  template: `
    <div>
      <h2>父组件</h2>
      <ChildComponent message="Hello, Child!"></ChildComponent>
    </div>
  `
};

// 子组件
const ChildComponent = {
  props: ['message'],
  template: `
    <div>
      <h3>子组件</h3>
      <p>{{ message }}</p>
    </div>
  `
};

// 创建Vue应用程序实例
const app = Vue.createApp({
  components: {
    ParentComponent,
    ChildComponent
  }
});

// 挂载根组件
app.mount('#app');

在上述代码中，父组件通过`<ChildComponent message="Hello, Child!"></ChildComponent>`将`message`属性的值传递给子组件。子组件通过props定义了`message`属性，并在模板中使用了它。最终，子组件会渲染出"Hello, Child!"。

通过props，父组件可以向子组件传递任何类型的数据，包括字符串、数值、对象等。子组件可以根据需要使用这些数据来实现自己的功能。