Vue.js 组件基础 #yyds干货盘点#【yyds干货盘点】

学习目录：

1. Vue.js 简介
2. Vue.js 实例与数据绑定
3. Vue.js 计算属性和侦听器
4. Vue.js 条件渲染和列表渲染
5. Vue.js 事件处理
6. Vue.js 表单输入绑定
7. Vue.js 组件基础
8. Vue.js 组件通信
9. Vue.js 插槽
10. Vue.js 动态组件和异步组件
11. Vue.js 自定义指令
12. Vue.js 过渡和动画
13. Vue.js 混入
14. Vue.js 自定义事件和 v-model
15. Vue.js 渲染函数和 JSX
16. Vue.js 插件
17. Vue.js 单文件组件
18. Vue.js Webpack 配置和打包优化
19. Vue.js Vue Router
20. Vue.js Vuex
21. Vue.js 服务端渲染
22. Vue.js 代码测试和调试
23. Vue.js 生态系统
24. Vue.js 最佳实践和性能优化
25. Vue.js 应用部署和上线

Vue.js 是一个流行的前端 JavaScript 框架，它提供了一种声明式的方式来构建用户界面。其中一个最强大的特性是组件化，通过组件化，我们可以将复杂的用户界面拆分成多个独立的、可重用的部分。

什么是组件

在 Vue.js 中，组件是可复用的代码块，它包含了 HTML、CSS 和 JavaScript。组件可以接收参数（props）和发出事件（events），组件可以嵌套在其他组件中，形成更复杂的用户界面。

组件可以是全局的，也可以是局部的。全局组件在应用程序的任何地方都可以使用，而局部组件只能在父组件中使用。

如何创建组件

要创建一个 Vue.js 组件，我们可以使用 Vue.component 函数。这个函数接收两个参数：组件名称和一个组件选项对象。组件选项对象包含了组件的模板、数据、方法等。

下面是一个简单的 Vue.js 组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="incrementCounter">{{ buttonLabel }}</button>
  </div>
</template>

<script>
Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    },
    buttonLabel: {
      type: String,
      default: 'Click me'
    }
  },
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter() {
      this.counter++
      this.$emit('counter-incremented', this.counter)
    }
  }
})
</script>

在这个组件中，我们定义了一个模板，它包含了一个标题和一个按钮。组件接收两个 props：title 和 buttonLabel。title 是必需的，而 buttonLabel 是可选的，默认值为 'Click me'。组件还有一个名为 counter 的数据属性和一个名为 incrementCounter 的方法。当用户点击按钮时，incrementCounter 方法会将 counter 属性的值增加 1，并发出一个名为 counter-incremented 的事件。

如何使用组件

要在应用程序中使用组件，我们可以在模板中使用组件标签。标签的名称就是组件名称，属性就是组件的 props。

下面是一个使用上面定义的组件的示例：

<template>
  <div>
    <my-component title="Hello, world!" @counter-incremented="handleCounterIncremented" />
  </div>
</template>

<script>
export default {
  methods: {
    handleCounterIncremented(counter) {
      console.log(`Counter incremented to ${counter}`)
    }
  }
}
</script>

在这个示例中，我们在应用程序的模板中使用了一个 my-component 标签，并传递了一个 title 属性。我们还监听了 counter-incremented 事件，并在事件处理程序中打印了 counter 的值。

总结

组件是 Vue.js 的核心特性之一，它使我们能够将用户界面拆分成多个可重用的部分。要创建一个组件，我们需要使用 Vue.component 函数，并提供组件的模板、数据、方法等。要在应用程序中使用组件，我们可以在模板中使用组件标签，并传递 props 和监听事件。