What are Vue components? How to create and use components?

What is a component?
Components are small modules in Vue applications, blocks of code that can be reused. Components make it easier to develop large applications because you can break the code into small pieces, each responsible for a specific task, like building Lego blocks.

Creating components
There are two ways to create components in Vue:

1. Register a component
   Use the Vue.component() method to register a global component:

Vue.component('my-component', {
    
      
  // 组件选项  
  // ...  
})

2. Register a local component
   to register a local component in a Vue instance:

new Vue({
    
      
  el: '#app',  
  components: {
    
      
    'my-component': MyComponent // 局部注册组件  
  }  
})

Using components
Use components in templates:

<template>  
  <div>  
    <my-component></my-component>  
  </div>  
</template>

Component options

1. Template option
   template: HTML template of the component. Can contain other components and directives. Note that the template option cannot be used when registering globally.

<template>  
  <div>  
    <p>{
   
   { msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！  
  </div>  
</template>

2. Data option
   data: The data object of the component, which can contain arbitrary data. Note that the data option cannot be used when registering globally.

<script>  
export default {
    
      
  data() {
    
     // 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！) 
}

3. Method options
   : methods of the component, which can be called in the component's template. Method options cannot be used when registering globally.

<script>  
export default {
    
      
  methods: {
    
      
    greet() {
    
      
      alert('Hello!')  
    }  
  }  
}  
</script>

4. Computed property option
   computed: The component's calculated property can be used in the component's template. The computed property option cannot be used when registering globally.

<script>  
export default {
    
      
  data() {
    
      
    return {
    
      
      message: 'Hello'  
    }  
  },  
  computed: {
    
      
    reversedMessage() {
    
      
      return this.message.split('').reverse().join('')  
    }  
  }  
}  
</script>

5. Event options
   events: Events that the component can listen to and trigger, which can be used in the component's template. Event options cannot be used when registering globally.

<script>  
export default {
    
      
  events: {
    
      
    click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。  
  },  
  methods: {
    
      
    greet() {
    
      
      alert('Hello!')  
    }  
  }  
}  
</script>

6. Style options
   styles: The style of the component, which can be used in the component's template. Style options cannot be used when registered globally. Styles can contain other CSS modules such as less or sass. In style options, you can use the & symbol to reference the component's data. For example: color: &primaryColor;.

<script>  
export default {
    
      
  data() {
    
      
    return {
    
      
      primaryColor: 'blue'  
    }  
  },  
  styles: {
    
      
    color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。  
  }  
}  
</script>

7. Lifecycle option
   lifecycle: The lifecycle hook function of the component, which can be called during the creation, update, destruction and other stages of the component. Lifecycle options cannot be used when registering globally. The following are some common life cycle hook functions: created(): called when the component is created; mounted(): called when the component is mounted on the DOM; updated(): called when the component is updated; destroyed(): called when the component is destroyed. Note that these hook functions are function options, not computed property or method options. Below is an example:

<script>  
export default {
    
      
  created() {
    
     // 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
  },
  mounted() {
    
     // 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。   
    this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';  
  },  
  updated() {
    
     // 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。   
    // ...  
  },  
  destroyed() {
    
     // 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。   
    // ...  
  }  
</script>
}