vue组件封装

当需要在自定义组件中接收来自父组件的数据时，可以使用 props 属性来定义组件的属性。通过使用 props，你可以在父组件中向子组件传递数据，并在子组件中使用这些数据。

下面是一个示例，展示如何在自定义组件中使用 props：

// MyComponent.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述示例中，我们在组件的 props 选项中定义了两个属性：title 和 message。title 属性是一个字符串类型的属性，并设置了默认值为 'Default Title'。message 属性也是一个字符串类型的属性，同时设置了 required: true，表示这个属性是必需的。

然后，你可以在父组件中使用这个自定义组件，并向其传递相应的属性值：

<template>
  <div>
    <my-component title="Custom Title" :message="customMessage"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      customMessage: 'Hello from parent component'
    };
  }
};
</script>

在上述示例中，我们通过在 <my-component> 标签上使用属性来传递数据。title 属性的值被设置为 'Custom Title'，而 message 属性的值被动态绑定到父组件的 customMessage 数据属性。

通过使用 props，你可以在父组件和子组件之间进行数据的传递和交流，实现更灵活和可复用的组件结构。

需要注意的是，父组件中传递的属性值可以是固定的值，也可以是动态绑定的表达式。动态绑定的属性值使用冒号 : 进行前缀。