关键词：
【中文标题】使用 Vue.js 创建可重用的按钮组件【英文标题】：Create Reusable Button Component with Vue.js 【发布时间】：2019-03-24 20:33:45 【问题描述】：我有一个 Nuxt.js 项目，我正在使用自定义按钮。
按钮是一个链接，带有一个svg path和一个span。我还有按钮动画，它在 mouse over 和 mouse out 事件 上触发。
这是我的按钮代码。
<template>
<a class="button green" href="/"
@mouseover="buttonEnter"
@mouseout="buttonLeave">
<svg viewBox="0 0 180 60">
<path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
</svg>
<span>Go Home</span>
</a>
</template>
<script>
import buttonEnter from '~/assets/animate'
import buttonleave from '~/assets/animate'
export default
methods:
buttonEnter(event)
const buttonPath = event.currentTarget.querySelector('path')
const buttonSpan = event.currentTarget.querySelector('span')
buttonEnter(buttonPath, buttonSpan)
,
buttonLeave(event)
const buttonPath = event.currentTarget.querySelector('path')
const buttonSpan = event.currentTarget.querySelector('span')
buttonleave(buttonPath, buttonSpan)
,
,
</script>
我在很多页面中都使用了这个按钮，我觉得我在复制自己，拥有一个按钮组件会让事情变得更好、更整洁。问题是我是 Vue 的新手，但我没有做到这一点。有人可以指出我或给我一个示例代码如何正确地编写可重用组件吗？
这里还有动画的 buttonEnter 和 buttonleave 函数。
import anime from "animejs";
export function buttonEnter(buttonPath, buttonSpan)
anime.remove([buttonPath, buttonSpan]);
anime(
targets: buttonPath,
d:
"M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40 170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10 10,10 Z",
elasticity: 700,
offset: 0
);
anime(
targets: buttonSpan,
scale: 1.15,
duration: 800,
offset: 0
);
export function buttonleave(buttonPath, buttonSpan)
anime.remove([buttonPath, buttonSpan]);
anime(
targets: buttonPath,
d:
"M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z",
elasticity: 700,
offset: 0
);
anime(
targets: buttonSpan,
scale: 1,
duration: 800,
offset: 0
);
这是按钮的演示 codesandbox
【问题讨论】：
【参考方案1】：创建component 是您所追求的。幸运的是，这在 Vue.js 中非常简单。
您在代码中唯一需要做的就是使用name key 命名组件。例如，让我们调用我们的可重用组件自定义按钮：name: 'custom-button'
custom-button.vue
<template>
<a class="button green" href="/"
@mouseover="buttonEnter"
@mouseout="buttonLeave">
<svg viewBox="0 0 180 60">
<path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
</svg>
<span>Go Home</span>
</a>
</template>
<script>
import buttonEnter from '~/assets/animate'
import buttonleave from '~/assets/animate'
export default
name: 'custom-button',
methods:
buttonEnter(event)
const buttonPath = event.currentTarget.querySelector('path')
const buttonSpan = event.currentTarget.querySelector('span')
buttonEnter(buttonPath, buttonSpan)
,
buttonLeave(event)
const buttonPath = event.currentTarget.querySelector('path')
const buttonSpan = event.currentTarget.querySelector('span')
buttonleave(buttonPath, buttonSpan)
,
,
</script>
您现在唯一要做的就是将文件导入您要使用的页面中。由于我们已经将其导出为默认值，因此我们可以使用 import 简单地导入它。最后但同样重要的是，我们需要告诉 Vue 我们想要注册一个新组件以在标记中使用。使用您希望在特定页面上使用的组件对象添加 components 键。
about.vue
<template>
<div class="container">
<div>
<h1>About us</h1>
<custom-button></custom-button>
</div>
</div>
</template>
<script>
import customButton from './pathToCustomButton.vue'
export default
name: 'about',
components: customButton
</script>
【讨论】：
【参考方案2】：只需将index.vue 中的内容放在components 文件夹下名为custombtn.vue 的新文件中，您的index.vue 应该是这样的：
<template>
<div>
test btn
<custombtn />
it done !
</div>
</template>
<script>
import custombtn from '~/components/custombtn.vue'
export default
components:
custombtn
</script>在custombtn.vue 中，您可以按如下方式导入buttonEnter, buttonleave：
import buttonEnter, buttonleave from '../assets/animate'
检查这个sandbox
【讨论】：
vue.js 2 使用两个不同的父变量重用组件
】vue.js2使用两个不同的父变量重用组件【英文标题】：vue.js2Reusingcomponentwithtwodifferentparentvariables【发布时间】：2017-03-2716:16:09【问题描述】：我正在尝试使用一个组件来改变多年的编程语言经验。为了做到这一点，我使用几个... 查看详情
如何在 Vue.js 中访问可重用组件的其他实例的状态
】如何在Vue.js中访问可重用组件的其他实例的状态【英文标题】：HowcanoneaccessthestateofotherinstancesofareusablecomponentinVue.js【发布时间】：2021-08-1717:46:55【问题描述】：作为Vue新手，遇到了以下用例。我有一个可在整个应用程序中重... 查看详情
使用 KnockoutJS 创建可重用组件
】使用KnockoutJS创建可重用组件【英文标题】：CreatingreusablecomponentswithKnockoutJS【发布时间】：2012-03-0106:14:41【问题描述】：一段时间以来，我一直在为项目创建可重用组件作为jQuery插件。我喜欢能够抽象出逻辑，并根据具体情况... 查看详情
如何创建可重用的 Twig 组件
...布时间】：2019-07-0508:51:48【问题描述】：我正在开发一个使用Twig进行渲染的Symfony3应用程序。为了使代码更具可读性和可重用性，我需要将屏幕分成小部分，这些部分可以在其他屏幕中使用（例如时钟小部件）。起初看起来很简... 查看详情
什么是组件
...展。 如何注册组件？ 需要使用Vue.extend方法创建一个组件，然后使用Vue.compo 查看详情
vue组件学习（转载）
...展。 如何注册组件？ 需要使用Vue.extend方法创建一个组件，然后使用Vue.compo 查看详情
说说说vue.js中的组
...组件也可以是原生HTML元素的形式。如何注册组件？需要使用vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下： varMyComponent= 查看详情
如何使用 Ionic 3 和 Angular 4 创建可重用组件
】如何使用Ionic3和Angular4创建可重用组件【英文标题】：HowtocreateareusablecomponentwithIonic3andAngular4【发布时间】：2018-05-0304:31:04【问题描述】：我想为我的应用创建一个可重用的标头。所以，我做到了：创建组件（app-header）：app-hea... 查看详情
vue组建的创建(代码片段)
...ent）是Vue.js最强大的功能之一。vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。组件可以扩展HTML元素，封装可重用的代码。组件... 查看详情
vue.js组件（component）
...注册，就好像欧元和英镑的区别，前者可以在各Vue实例中使用，后者只能在注册他的Vue实例或者父组件中使用。如果在组件中使用组件，就形 查看详情
创建可重用组件的模式
...了确保整个应用程序保持相同的外观和感觉，我希望能够使用流星的模板系统创建标准组件。因此，功能模板不应包含任何html，而这应全部包含在组件模板中。我尝试过meteor-p 查看详情
vue.js中的全局组件和局部组件
...是自定义元素，Vue.js的编译器为它添加特殊功能。组件的使用有三个步骤：1、创建组件构造器2、注册组件3、使用组件先来看一段代码：<!DOCTYPEhtml><html><body><divid="app"><!--3.#a 查看详情
vue2.0笔记——组件(代码片段)
...。组件是自定义元素，Vue.js的编译器为它添加特殊功能。使用组件组件的注册与使用全局注册我们需要通过一个全局的API来构造。Vue.extend(options)用法:使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。同... 查看详情
如何使用打字稿在可重用组件中导入html样式属性？
】如何使用打字稿在可重用组件中导入html样式属性？【英文标题】：Howtoimporthtmlstyleattributeinareusablecomponentwithtypescript?【发布时间】：2021-06-1023:12:43【问题描述】：大家好，我想创建一个可重用的按钮组件。OnClick属性实现成功。... 查看详情
vue.2.0.5-组件
...况下，组件也可以是原生HTML元素的形式，以is特性扩展。使用组件注册之前说过，我们可以通过以下方式创建一个Vue实例：newVue({el:‘#some-element‘,//选项})要注册一个全局组件，你 查看详情
Magnolia 中的可重用表单组件
...ntinMagnolia【发布时间】：2021-06-0918:48:42【问题描述】：我使用表单组件创建表单并将数据插入到带有JavaScript表单处理器的数据库中。我想创建一个可重复使用的表单，其中包含一组固定字段作为组件，我可以将其添加到任何页... 查看详情
vue的入门&&组件
...件是可复用的，可维护的。组件具有强大的封装性，易于使用。大型应用中，组件与组件之间交互是可以解耦操作的。表单属性 表单元素的分类 注册组件并使用通过Vue.component（）去注册一个组件，你就可以全... 查看详情
vue.js——组件快速入门（上篇）
....js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将... 查看详情