使用vue2.0或vue3.0创建自定义组件

Vue2.0创建自定义组件

在 Vue 2.0 中创建自定义组件是一个相对简单的过程。以下是一个详细的步骤指南，帮助你创建一个自定义组件。

步骤 1: 创建 Vue 组件文件

首先，你需要创建一个新的 Vue 文件（.vue 文件）。假设我们要创建一个名为 MyButton 的按钮组件。

bash

touch src/components/MyButton.vue

步骤 2: 编写组件模板

打开 MyButton.vue 文件，并编写组件的模板部分。模板部分定义了组件的 HTML 结构。

vue

<template> <button :class="['my-button', type]" @click="handleClick"> <slot></slot> </button> </template>

步骤 3: 添加样式

接下来，在 <style> 标签中添加组件的样式。你可以根据需要添加更多的样式规则。

vue

<style scoped> .my-button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; outline: none; } .my-button.primary { background-color: #42b983; color: white; } .my-button.secondary { background-color: #ccc; color: black; } .my-button:hover { opacity: 0.8; } </style>

步骤 4: 编写脚本

在 <script> 标签中编写组件的 JavaScript 逻辑。这里可以定义组件的数据、方法、属性等。

vue

<script> export default { name: 'MyButton', props: { type: { type: String, default: 'primary' } }, methods: { handleClick(event) { this.$emit('click', event); } } }; </script>

步骤 5: 使用自定义组件

最后，在父组件中引入并使用这个自定义组件。假设我们在 App.vue 中使用 MyButton 组件。

在 App.vue 中引入和使用 MyButton 组件

vue

<template> <div id="app"> <h1>欢迎使用 MyButton 组件</h1> <MyButton type="primary" @click="handlePrimaryClick">主要按钮</MyButton> <MyButton type="secondary" @click="handleSecondaryClick">次要按钮</MyButton> </div> </template> <script> import MyButton from './components/MyButton.vue'; export default { name: 'App', components: { MyButton }, methods: { handlePrimaryClick() { alert('点击了主要按钮'); }, handleSecondaryClick() { alert('点击了次要按钮'); } } }; </script> <style> /* 其他样式 */ </style>

完整示例

以下是完整的 MyButton.vue 和 App.vue 文件内容。

src/components/MyButton.vue

vue

<template> <button :class="['my-button', type]" @click="handleClick"> <slot></slot> </button> </template> <script> export default { name: 'MyButton', props: { type: { type: String, default: 'primary' } }, methods: { handleClick(event) { this.$emit('click', event); } } }; </script> <style scoped> .my-button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; outline: none; } .my-button.primary { background-color: #42b983; color: white; } .my-button.secondary { background-color: #ccc; color: black; } .my-button:hover { opacity: 0.8; } </style>

src/App.vue

vue

<template> <div id="app"> <h1>欢迎使用 MyButton 组件</h1> <MyButton type="primary" @click="handlePrimaryClick">主要按钮</MyButton> <MyButton type="secondary" @click="handleSecondaryClick">次要按钮</MyButton> </div> </template> <script> import MyButton from './components/MyButton.vue'; export default { name: 'App', components: { MyButton }, methods: { handlePrimaryClick() { alert('点击了主要按钮'); }, handleSecondaryClick() { alert('点击了次要按钮'); } } }; </script> <style> /* 其他样式 */ </style>

解释

1. 模板 (<template>):

   • 使用 <button> 标签创建按钮元素。
   • 使用 :class 动态绑定类名，根据 type 属性设置不同的样式。
   • 使用 <slot> 插槽允许父组件传递内容到子组件内部。
   • 使用 @click 监听点击事件，并调用 handleClick 方法。

2. 脚本 (<script>):

   • 导出一个对象，定义组件的名称、属性、方法等。
   • props 定义了一个 type 属性，默认值为 'primary'。
   • methods 定义了一个 handleClick 方法，触发 click 事件并将事件对象传递给父组件。

3. 样式 (<style scoped>):

   • 使用 .my-button 类定义基础样式。
   • 使用 .my-button.primary 和 .my-button.secondary 定义不同类型的按钮样式。
   • 使用 :hover 伪类定义鼠标悬停时的样式。

4. 父组件 (App.vue):

   • 引入 MyButton 组件并在 components 选项中注册。
   • 使用 MyButton 组件，并传递 type 属性和 click 事件处理器。
   • 定义 handlePrimaryClick 和 handleSecondaryClick 方法处理按钮点击事件。

通过以上步骤，你可以在 Vue 2.0 中成功创建并使用自定义组件。

Vue3.0创建自定义组件

Vue 3.0 引入了许多新特性和改进，使得组件的创建和使用更加简洁和高效。以下是使用 Vue 3.0 创建自定义组件的步骤。

步骤 1: 创建 Vue 组件文件

首先，创建一个新的 Vue 文件（.vue 文件）。假设我们要创建一个名为 MyButton 的按钮组件。

bash

touch src/components/MyButton.vue

步骤 2: 编写组件模板

打开 MyButton.vue 文件，并编写组件的模板部分。模板部分定义了组件的 HTML 结构。

vue

<template> <button :class="['my-button', type]" @click="handleClick"> <slot></slot> </button> </template>

步骤 3: 添加样式

接下来，在 <style> 标签中添加组件的样式。你可以根据需要添加更多的样式规则。

vue

<style scoped> .my-button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; outline: none; } .my-button.primary { background-color: #42b983; color: white; } .my-button.secondary { background-color: #ccc; color: black; } .my-button:hover { opacity: 0.8; } </style>

步骤 4: 编写脚本

在 <script setup> 标签中编写组件的 JavaScript 逻辑。Vue 3.0 提供了 <script setup> 语法糖，使代码更简洁。

vue

<script setup> import { defineProps } from 'vue'; const props = defineProps({ type: { type: String, default: 'primary' } }); const emit = defineEmits(['click']); function handleClick(event) { emit('click', event); } </script>

步骤 5: 使用自定义组件

最后，在父组件中引入并使用这个自定义组件。假设我们在 App.vue 中使用 MyButton 组件。

在 App.vue 中引入和使用 MyButton 组件

vue

<template> <div id="app"> <h1>欢迎使用 MyButton 组件</h1> <MyButton type="primary" @click="handlePrimaryClick">主要按钮</MyButton> <MyButton type="secondary" @click="handleSecondaryClick">次要按钮</MyButton> </div> </template> <script setup> import MyButton from './components/MyButton.vue'; function handlePrimaryClick() { alert('点击了主要按钮'); } function handleSecondaryClick() { alert('点击了次要按钮'); } </script> <style> /* 其他样式 */ </style>

完整示例

以下是完整的 MyButton.vue 和 App.vue 文件内容。

src/components/MyButton.vue

vue

<template> <button :class="['my-button', type]" @click="handleClick"> <slot></slot> </button> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps({ type: { type: String, default: 'primary' } }); const emit = defineEmits(['click']); function handleClick(event) { emit('click', event); } </script> <style scoped> .my-button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; outline: none; } .my-button.primary { background-color: #42b983; color: white; } .my-button.secondary { background-color: #ccc; color: black; } .my-button:hover { opacity: 0.8; } </style>

src/App.vue

vue

<template> <div id="app"> <h1>欢迎使用 MyButton 组件</h1> <MyButton type="primary" @click="handlePrimaryClick">主要按钮</MyButton> <MyButton type="secondary" @click="handleSecondaryClick">次要按钮</MyButton> </div> </template> <script setup> import MyButton from './components/MyButton.vue'; function handlePrimaryClick() { alert('点击了主要按钮'); } function handleSecondaryClick() { alert('点击了次要按钮'); } </script> <style> /* 其他样式 */ </style>

解释

1. 模板 (<template>):

   • 使用 <button> 标签创建按钮元素。
   • 使用 :class 动态绑定类名，根据 type 属性设置不同的样式。
   • 使用 <slot> 插槽允许父组件传递内容到子组件内部。
   • 使用 @click 监听点击事件，并调用 handleClick 方法。

2. 脚本 (<script setup>):

   • 使用 defineProps 定义组件的属性。
   • 使用 defineEmits 定义组件可以触发的事件。
   • 定义 handleClick 方法，触发 click 事件并将事件对象传递给父组件。

3. 样式 (<style scoped>):

   • 使用 .my-button 类定义基础样式。
   • 使用 .my-button.primary 和 .my-button.secondary 定义不同类型的按钮样式。
   • 使用 :hover 伪类定义鼠标悬停时的样式。

4. 父组件 (App.vue):

   • 引入 MyButton 组件并在模板中使用。
   • 定义 handlePrimaryClick 和 handleSecondaryClick 方法处理按钮点击事件。

通过以上步骤，你可以在 Vue 3.0 中成功创建并使用自定义组件。Vue 3.0 的 <script setup> 语法糖使得代码更加简洁易读。