How Vue encapsulates components

To wrap a Vue component, follow these steps:

1. Create a new Vue single-file component (.vue file) and name it your component name, eg MyComponent.vue.

2. In a component file, use <template>the tag to define the template structure of the component, <script>the tag to define the logic of the component, and <style>the tag to define the style of the component.

3. In <script>the tag, use to export defaultexport a Vue component object.

4. In the component object, define the component's properties (props), data (data), methods (methods), lifecycle hooks (lifecycle hooks), etc.

5. Additional subcomponents or plugins can be included in the component if desired.

6. Where you need to use this component, use importthe statement to import this component, and then use the label of this component in the template of the parent component .

Here's a simple example showing how to wrap a simple button component:

<template>
  <button @click="handleClick" :class="buttonClass">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonClass: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      // 处理按钮点击事件的逻辑
      console.log('按钮被点击了！');
    }
  }
}
</script>

<style scoped>
/* 组件的样式 */
button {
  /* 样式规则 */
}
</style>

In the above example, we defined a MyButtoncomponent named which accepts a buttonClassproperty to set the CSS class name of the button. handleClickWhen the button is clicked, the method is called , which prints a message to the console. You can customize the properties and methods of the component according to your own needs, and use slots in the template to insert content.

To use packaged components, you need to follow these steps:

• In your Vue project, find the parent component that needs to use this component.

• In the script section of the parent component, use importthe statement to import your encapsulated component . Assuming your component file name is named MyComponent.vueand it is in the same directory as the parent component, you can use the following code to import the component:

import MyComponent from './MyComponent.vue';

• componentsRegister your imported components in the parent component's props . For example, add the following code to the parent component's script:

export default {
  name: 'MyParentComponent',
  components: {
    MyComponent
  },
  // 其他组件选项
}

• In the parent component's template, use your wrapped component. You can directly use the tag in the template<my-component> , where my-componentis the component name you specified when registering the component (in the above example, we used MyComponent) The matching rule between the component name and the tag name is: the component name uses camel case or Pascal Nomenclature, while the tag name should use the hyphen nomenclature when used in the template, that is, composed of lowercase letters and hyphens , for example my-component.

<template>
  <div>
    <my-component button-class="custom-button">Click me!</my-component>
  </div>
</template>

• In the above example, we button-classset the property to "custom-button"and inserted text content inside the component "Click me!". These will be displayed in your wrapped components.

In this way, you have successfully used your encapsulated component in the parent component. You can pass different prop values ​​as needed to customize the behavior and styling of the component.

• In encapsulated components, propsproperties are used to receive data passed from the parent component. By definition props, you can use this data inside the component and process or display it as needed.
• Here's propswhat it does in packaged components:

1. Data passing: propsAllows you to pass data from parent components to child components. Parent components can pass data to child components by binding property values, and child components can propsdeclare corresponding properties in to receive these data.

2. Data type verification: You can propsspecify the received data type in to verify whether the data passed by the parent component meets expectations. This helps to ensure the correctness and consistency of the data.

3. One-way data flow: Vue advocates the concept of one-way data flow, that is, data flows from parent components to child components, and child components are not allowed to directly modify the data of the parent component. By using props, you can explicitly specify which data is read-only to follow the one-way data flow principle.

4. Component parameterization: By using props, you can parameterize components, making components flexible and reusable in different scenarios. By modifying the properties passed from the parent component to the child component, you can change the behavior or appearance of the child component without modifying the child component itself.

By using it props, you can realize data communication and parameter passing between components, which enhances the composability and reusability of components.