什么是Vue组件？如何创建和使用组件？-Toy模板网

这篇具有很好参考价值的文章主要介绍了什么是Vue组件？如何创建和使用组件？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

啥是组件？
组件就是Vue应用中的小模块，可以重复使用的代码块。组件使得开发大型应用更加容易，因为你可以把代码分成多个小块，每个小块都负责特定的任务，就像搭乐高积木一样。

创建组件
在Vue中创建组件有两种方式：

注册组件
使用Vue.component()方法注册一个全局组件：

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

局部注册组件
在某个Vue实例中注册一个局部组件：

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

使用组件
在模板中使用组件：

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

组件选项文章来源地址https://www.toymoban.com/news/detail-460603.html

模板选项
template：组件的HTML模板。可以包含其他组件和指令。注意，模板选项不能在全局注册时使用。

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

数据选项
data：组件的数据对象，可以包含任意数据。注意，数据选项不能在全局注册时使用。

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

方法选项
methods：组件的方法，可以在组件的模板中调用。方法选项不能在全局注册时使用。

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

计算属性选项
computed：组件的计算属性，可以在组件的模板中使用。计算属性选项不能在全局注册时使用。

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

事件选项
events：组件可以监听和触发的事件，可以在组件的模板中使用。事件选项不能在全局注册时使用。

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

样式选项
styles：组件的样式，可以在组件的模板中使用。样式选项不能在全局注册时使用。样式可以包含其他CSS模块，例如less或sass。在样式选项中，可以使用&符号来引用组件的data数据。例如：color: &primaryColor;。

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

生命周期选项
lifecycle：组件的生命周期钩子函数，可以在组件的创建、更新、销毁等阶段调用。生命周期选项不能在全局注册时使用。下面是一些常见的生命周期钩子函数：created()：组件创建时调用；mounted()：组件挂载到DOM上时调用；updated()：组件更新时调用；destroyed()：组件销毁时调用。注意，这些钩子函数都是函数选项，而不是计算属性或方法选项。下面是一个例子：

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