搜索
首页web前端js教程Vue中component组件使用步骤详解
Vue中component组件使用步骤详解May 03, 2018 am 10:36 AM
component步骤详解

这次给大家带来Vue中component组件使用步骤详解,Vue中component组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。

官方的说明

渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

具体可以官网文档中的

动态组件

 内置的组件component

场景

这里通过一个业务场景来阐述vue内置component组件的应用。 如图所示,这里展示经典注册页面,注册分为邮箱注册和手机注册,弹窗顶部有标签可以切换注册类型,中间是注册表单信息,邮箱注册和手机注册有着不一样的表单内容,底部是注册按钮以及其他操作。 经过分析手机注册界面与邮箱注册除了中间的表单内容不一致之外,其他的界面内容是一样的。

实际项目代码设计中,为了保证复用性和可维护性,是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。

核心代码实现

顶部tab切换的时候,type值发生改变,对应的表单的组件也发生了变化

<template>
 <p>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleCloseBtnClick"></a>
	<p>
	 <h3>新用户注册</h3>
	 <p>
		<span :class="{active: type === &#39;mobileForm&#39;}" @click="type = mobileForm">手机注册</span>
		<span :class="{active: type === &#39;emailForm&#39;}" @click="type = emailForm">邮箱注册</span>
	 </p>
	</p>
	<component :is="type" ref="form">
	 <button @click="handleRegisterBtnClick">注册</button>
	 <p ><span ><span>注册视为同意</span><a> 《法律条款和隐私说明》</a></span></p>
	 <p><span>已有账号<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleLoginBtnClick">直接登入>></a></span></p>
	</component>
 </p>
</template>
<script>
 export default {
 	methods: {
		handleRegisterBtnClick () {
		 	this.$refs.form.validateData().then(() => {
				this.$refs.form.getFormData()
			})
		 }
	}
 }
</script>

mixins混合

用Vue内置component组件情况下,一般实际被渲染的组件具有一定的共性,比如相同的属性,相同的方法或者相同的初始化销毁过程。比如目前这个场景中邮箱表单和手机表单都具有校验方法(validateData)和获取表单数据方法(getFormData)。 这种情况下可以使用vue提供的混合的功能。进一步抽离 mixins.js

export default {
 methods: {
  validateData() {
   return Promise.resolve()
  },
  getFormData() {
   return {}
  }
 }
}

email-form.vue

<script>
import minx from './mixins'
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: 'example@example.com' }
  }
 }
}
</script>

如果有自定义的需求,可以重写mixins中的方法。

表格的应用

在管理后台项目中,表格经常会被用到。我们希望表格的td是文本、进度条、checkbox等等,且希望通过传一个json配置就可以渲染出。使用vue内置的component组件可以起到很赞的作用。

 

比如这样的一个table使用方式

<template>
 <vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
  data () {
   return {
    columns: [
     { title: 'ID', width: '30', dataKey: 'id' },
     { title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
    ],
    datum: [{ id: '1', name: '进度0', progress: 10 }]
   }
  }
 }
</script>

table中使用component的实现

<td v-for="column of columns">
	<component :is="`${TYPE_PRE}${columns.render.type}`" :row-data="rowData" :params="columns.render"></component>
</td>

表单的应用

在管理后台项目中,表单也经常需要用到,我们也同样希望表单的某一项是文本框,下拉框,时间选择框,富文本等等等等,且希望通过传一个json配置就可以渲染出。vue内置的component组件可以依然可以实现这样一个美好的愿景。

 

比如这样的一个form使用方式

<template>
  <c-form :cells="cells" ref="form">
   <button class="button is-primary" :class="{ &#39;is-disabled&#39;: isSubmitBtnDisabled }" @click.prevent="submit">提交</button>
  </c-form>
</template>
<script>
  export default {
  computed: {
   cells () {
    return [
     {
      field: 'name',
      label: '名称',
      type: 'textfield',
      attrs: { placeholder: '名称' },
      validate: { required: { message: '请输入名称'} }
     },
     {
      field: 'enable',
      label: '启用标志',
      type: 'dropdown',
      extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }] }
     }
    ]
   }
  }
 }
</script>

form中使用component的实现

<form>
 <c-form-cell v-for="cell of cellList" :key="cell.field" :field="cell.field">
  <component
	 :is="`${TYPE_PRE}${cell.type}`"
	 :field="cell.field"
	 :attrs="cell.attrs"
	 :extra="cell.extra"
	 :validate="cell.validate"
	 :cells="cell.cells">
  </component>
 </c-form-cell>
</form>

表单和表格在 基于VUE的后台引擎 开源项目中都有实现,欢迎star和fork。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

剖析JS分时函数

Vue项目中引入icon图标步骤详解

js传递数组参数到controller步骤详解

以上是Vue中component组件使用步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Vue.nextTick函数用法详解及在异步更新中的应用Vue.nextTick函数用法详解及在异步更新中的应用Jul 26, 2023 am 08:57 AM

Vue.nextTick函数用法详解及在异步更新中的应用在Vue开发中,经常会遇到需要进行异步更新数据的情况,比如在修改DOM后需要立即更新数据或者在数据更新后需要立即进行相关操作。而Vue提供的.nextTick函数就是为了解决这类问题而出现的。本文就会详细介绍Vue.nextTick函数的用法,并结合代码示例来说明它在异步更新中的应用。一、Vue.nex

php-fpm调优方法详解php-fpm调优方法详解Jul 08, 2023 pm 04:31 PM

PHP-FPM是一种常用的PHP进程管理器,用于提供更好的PHP性能和稳定性。然而,在高负载环境下,PHP-FPM的默认配置可能无法满足需求,因此我们需要对其进行调优。本文将详细介绍PHP-FPM的调优方法,并给出一些代码示例。一、增加进程数默认情况下,PHP-FPM只启动少量的进程来处理请求。在高负载环境下,我们可以通过增加进程数来提高PHP-FPM的并发

Django框架中的缓存机制详解Django框架中的缓存机制详解Jun 18, 2023 pm 01:14 PM

在Web应用程序中,缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架,自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解,包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件May 12, 2023 pm 05:55 PM

一、基础的动态引入组件:简单的动态引入的意思是,前端知道要引入哪些组件,将多个组件引入到父组件中,但不渲染它,满足一定条件后,才去在某个位置渲染指定的组件。import{reactive,ref,shallowReactive,onActivated,defineAsyncComponent,}from&#39;vue&#39;;constcustomModal=defineAsyncComponent(()=>import(&#39;./modal/CustomM

PHP function_exists()函数用法详解PHP function_exists()函数用法详解Jun 27, 2023 am 10:32 AM

在PHP开发中,有时我们需要判断某个函数是否可用,这时我们便可以使用function_exists()函数。本文将详细介绍function_exists()函数的用法。一、什么是function_exists()函数?function_exists()函数是PHP自带的一个内置函数,用于判断某个函数是否被定义。该函数返回一个布尔值,如果函数存在返回True,

面试官:@Configuration 和 @Component 的区别面试官:@Configuration 和 @Component 的区别Aug 15, 2023 pm 04:29 PM

调用@Configuration类中的@Bean注解的方法,返回的是同一个示例;而调用@Component类中的@Bean注解的方法,返回的是一个新的实例。

PHP strpos()函数用法详解PHP strpos()函数用法详解Jun 27, 2023 am 10:43 AM

PHPstrpos()函数用法详解在PHP编程中,字符串处理是非常重要的一部分。PHP通过提供一些内置函数来实现字符串处理。其中,strpos()函数就是PHP中最常用的一个字符串函数之一。该函数的目的是在一个指定的字符串中搜索另一个指定字符串的位置,如果包含则返回这个位置,否则返回false。本文将通过详细分析PHPstrpos()函数的用法,助你更好

Gin框架的模板渲染功能详解Gin框架的模板渲染功能详解Jun 22, 2023 pm 10:37 PM

Gin框架是目前非常流行的Go语言Web框架之一。作为一个轻量级的框架,Gin提供了丰富的功能和灵活的架构,使得它在Web开发领域中备受欢迎。其中一个特别重要的功能是模板渲染。在本文中,我们将介绍Gin框架的模板渲染功能,并深入了解它的实现原理。一、Gin框架的模板渲染功能Gin框架使用了多种模板渲染引擎来构建Web应用程序。目前,它支持以下几种模板引擎:

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。