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

原创

AuraLife 2023-06-14 11:57:13 博主文章分类：VUE学习 ©著作权

文章标签 Vue 用户界面应用程序 文章分类 Vue.js 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者AuraLife的原创作品，请联系作者获取转载授权，否则将追究法律责任

学习目录：

Vue.js 简介
Vue.js 实例与数据绑定
Vue.js 计算属性和侦听器
Vue.js 条件渲染和列表渲染
Vue.js 事件处理
Vue.js 表单输入绑定
Vue.js 组件基础
Vue.js 组件通信
Vue.js 插槽
Vue.js 动态组件和异步组件
Vue.js 自定义指令
Vue.js 过渡和动画
Vue.js 混入
Vue.js 自定义事件和 v-model
Vue.js 渲染函数和 JSX
Vue.js 插件
Vue.js 单文件组件
Vue.js Webpack 配置和打包优化
Vue.js Vue Router
Vue.js Vuex
Vue.js 服务端渲染
Vue.js 代码测试和调试
Vue.js 生态系统
Vue.js 最佳实践和性能优化
Vue.js 应用部署和上线

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

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 的值。