-
2021-04-21 15:11:05更多相关内容
-
详解打造 Vue.js 可复用组件
2020-12-10 05:51:57我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。 从维护视图到维护数据,Vue.js 让我们快速地开发应用。但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难。 ... -
Angularjs 创建可复用组件实例代码
2020-10-21 09:20:27主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下 -
Vue 可复用组件
2020-06-22 10:15:24不同于根组件,同一个可复用组件,可以在同一个应用中多次使用。 2、可复用UI组件的创建 可复用组件在构建选项上与全局组件基本一致(除了一些特殊设定,后续会讲)。 可复用组件可以像标签一些在模板中使用,Vue ...1、什么是可复用的UI组件?
在
vue
中,我们可以通过new Vue
来创建一个组件,不过通常它是作为整个应用的顶层根组件存在的,我们还可以通过另外的方式来注册一个更为通用的组件。不同于根组件,同一个可复用组件,可以在同一个应用中多次使用。2、可复用UI组件的创建
可复用组件在构建选项上与全局组件基本一致(除了一些特殊设定,后续会讲)。
可复用组件可以像标签一些在模板中使用,Vue 会在解析过程中处理它们。2-1、全局定义
Vue.component('组件名称', {组件选项})
可以在任意位置(多个不同的 Vue 应用中)使用。
2-2、局部定义
new Vue({ ..., components: { '组件名称': {组件选项} } })
局部组件只能在其定义的组件内使用,不能在其子组件内部使用。
3、组件内部私有数据(状态)
可复用组件的
data
必须是函数,且该函数必须返回一个对象作为组件最终的data
。4、组件外部传入数据
如同一个函数一样,函数除了可以定义内部私有变量,有时候为了提高函数的复用性,我们通过会通过参数来接收外部传入的数据。组件也可以。
4-1、props
组件中内部私有数据存储中组件
data
中,通过外部传入的数据,则通过props
选项接收。首先,组件内部通过
props
来定义可以接收的数据名称,就像是函数的形参。然后,在使用该组件的时候可以通过标签属性的方式进行传参(可配合
v-bind
传入表达式)。注意事项
- 如果传入的
props
值为一个表达式,则必须使用v-bind
- 组件中的
data
和props
数据都可以通过组件实例进行直接访问 data
中的key
与props
中的key
不能冲突
5、组件通信
5-1、作用域隔离
为了保证数据安全性(传入的数据通常会在其它组件中也有使用),Vue 不推荐我们在组件内部直接修改传入的数据。
5-2、父组件到子组件内部的数据传递
父组件通过上述提到的
props
向一个子组件内部传递数据。5-3、子组件内部到外部的数据传递
5-3-1、$emit()
vue
为每个组件对象提供了一个内置方法$emit
,它等同于自定义事件中的new Event
,trigger
等this.$emit('自定义事件名称', 事件数据)
-
事件数据就是中触发事件的同时携带传递的数据 -
event
-
父级在使用该组件的过程中,可以通过
@事件名称
来注册绑定事件函数 -
事件函数的第一个参数就是事件数据
5-4、数据双向绑定
虽然并不推荐在组件内部修改
props
,但是,有的时候确实希望组件内部状态变化的时候改变props
,我们可以通过子组件触发事件,父级监听事件来达到这个目的,不过过程会比较繁琐,vue
提供了一些操作来简化这个过程。5-4-1、v-model
v-model
是vue
提供的一个用于实现数据双向绑定的指令,用来简化props 到 data
,data 到 props
的操作流程。5-4-1-1、model 选项
prop
指定要绑定的属性,默认是value
event
指定要绑定触发的事件,默认是input
事件5-4-2、.sync
通过
v-model
来进行双向绑定,会给状态维护带来一定的问题,因为修改比较隐蔽,同时只能处理一个prop
的绑定,我们还可以通过另外一种方式来达到这个目的。5-4-2-1、update:[prop]
这里事件名称要使用
update
加上prop
名称 的格式5-5、ref 与 $refs
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。6、插槽
默认情况下,组件模板解析后会替换整个组件内容,如果我们想在组件引用被包含的内容,可以通过
vue
提供的内置组件slot
来获取。6-1、slot
Vue
提供了一个内置的组件<slot>
,用于在组件模板内定义插槽。解析过程中,会被该组件嵌套的子组件(元素)对应的内容所替换。6-2、具名插槽
使用内置组件
template
与v-slot
指令进行配置,用来命名插槽,在组件模板中,通过<标签 v-slot:插槽名称>
来使用。- 插槽名称默认为
default
,可以省略。
6-3、作用域插槽
组件内部与组件包含的内容属于不同的作用域(被包含的内容是组件父级下的作用域)。
组件到父级作用域下的子级通信。
- 组件内部通过
slot
的attributes
进行数据传递。 - 子级通过
v-slot
指令的值进行接收。
// 组件内部 <slot v-for="user of users" :user="user"></slot> // 组件外部子级 <template v-slot:default="data"> <p>用户的姓名: {{data.user.username}}</p> </template>
7、props 验证
组件的
props
就是组件的参数,为了确保传入的数据在可控的合理范围内,我们需要对传入的props
的值类型进行必要的验证。Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } })
8、其它 props 相关知识点
8-1、非 prop 特性
一个非
prop
特性是指传向一个组件,但是该组件并没有相应prop
定义的特性,这些props
会被自动添加到组件的根元素上。8-2、替换/合并已有的特性
默认情况下,非
prop
特性的属性会覆盖组件根元素上同名的内容,但是针对style
和class
有特殊的处理,它们会合并(同名样式还是会覆盖)。8-3、禁用特性继承
如果你不希望组件的根元素继承特性,你可以在组件的选项中设置
inheritAttrs: false
,我们可以通过组件的this.$attrs
来获取这些属性。注意
inheritAttrs: false
选项不会影响style
和class
的绑定。 - 如果传入的
-
vue封装可复用组件confirm,并绑定在vue原型上的示例
2020-10-16 02:26:10今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
React教程之封装一个Portal可复用组件的方法
2020-08-28 09:23:21react的核心之一是组件,下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。 -
(五)嵌套组件:在组件中复用组件,父组件向子组件传值
2022-04-16 10:20:21嵌套组件:在组件中复用组件,Vue,前端框架,prop,props,组件中传参,父组件向子组件传值1.什么是在组件中复用组件呢?就是一个自定义组件后,在这个大组件里面还需要用到自己已经创建好的组件。
如图所示:
2.想要达成这样的效果主要分为三步(感觉和非单文件组件中嵌套组件差不多)
(1)分别创建两个组件
(2)在大组件即1中的组件A中导入组件
import Card from '../components/Card'; //import Card为自定义名称 from 组件路径
(3)注册要复用的组件
<script> import Card from '../components/Card'; export default { components:{Card} //components:{复用组件名称} }; </script>
(4)在外层组件即1中组件A想要组件显示的地方写入自定义组件名即可
<Card></Card>
3.组件传参
(1)被复用组件标签中
子组件中:
<div class="title">{{name}}</div> <div>{{age}}</div>
子组件中:
(2)props简单声明接收
props:['name','age']
父组件中:
(3)复用组件组件标签传具体值
<Card name="yy" :age="100"></Card> //通过属性传递数值 //默认传入值的类型是String,不支持运算,所以传入数值时最好动态绑定
对数值的类型做限制
props:{ name:String, age:Number }
4.尽量不直接修改传递过来的参数,因为控制台会报错,虽然功能可以实现。
示例:如果需要操作age,复制到data中,再去修改data中的数据
-
vue组件与复用详解
2020-10-18 14:51:10组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下 -
Vue.js的复用组件开发流程完整记录
2020-12-29 10:26:34接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者... -
安卓开发之创建可复用的UI组件-swift 创建复用组件.doc
2020-09-03 09:05:22安卓开发之创建可复用的UI组件:swift 创建复用组件 Android平台提供了广泛的UI可视组件---widget把这些小的可视的构件组合到一起就可以给用户提供复杂而有用的界面但是应用程序经常需要一些高级可视组件要满足这样的... -
业务管理网中可复用组件的划分与实现
2021-02-22 23:02:32针对业务管理网中动态变化的业务需求带来的业务管理的复杂度问题,提出面向业务网管中业务无关可复用组件的特征和描述方法。在此基础上对业务功能进行划分,形成可复用的业务组件,并给出一个业务功能向业务组件映射的... -
vue如何封装可复用组件?举例说明封装过的组件
2022-04-26 17:21:30在src目录文件下新建一个components文件,在这个文件中可以创建复用的组件 在需要用的组件需要经过三步,一是导入要用的这个组件,二是:注册组件,三是使用组件 封闭性:当在组件定义好外部不能修改;开放性:将...在src目录文件下新建一个components文件,在这个文件中可以创建复用的组件
在需要用的组件需要经过三步,一是导入要用的这个组件,二是:注册组件,三是使用组件
封闭性:当在组件定义好外部不能修改;开放性:将动态内容和组件通讯方式进行传递数据保证组件可扩展性;
总结:通过vue提供的组件通讯结合slot插槽来区分
封装的组件如下:
在components文件里创建一个你要封装的组件
在这个组件里面实现样式布局
在props接收数据,点击搜索按钮或回车时,触发this..$emit将数据传递给父组件
在父组件中导入注册使用组件
封装组件
html – headTips/index.vue
<template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> <template #right> <van-popover v-model="showPopover" theme="dark" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end" :offset="[8, 20]" > <template #reference> <div class="rgimg" v-if="!showrg"></div> </template> </van-popover> </template> </van-nav-bar> </div> </template>
js
<script> import { NavBar, Popover } from "vant"; export default { // 按需引入vant components: { [NavBar.name]: NavBar, [Popover.name]: Popover, }, // 接收父组件参数 props: { // 标题名称 text: { type: String, default: "", }, // 是否显示左边样式 shows: { type: Boolean, default: null, }, // 是否显示右边样式 showrg: { type: Boolean, default: null, }, }, data() { return { // 气泡弹出框 showPopover: false, actions: [ { text: "首页", icon: require("./images/icon_02.png"), url: "/" }, { text: "信贷", icon: require("./images/icon_03.png"), url: "/credit" }, { text: "理财", icon: require("./images/icon_04.png"), url: "/financial", }, { text: "保险", icon: require("./images/icon_05.png"), url: "/myDetails", }, ], }; }, methods: { // 选中事件 onSelect(action) { this.$router.push({ path: action.url, }); }, }, }; </script>
为了方便项目优化在 router.js 配置属性完成封装
路由自定义参数
- 使用meta属性进行参数属性定义
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // 避免路由重复点击引起的报错 //获取原型对象上的push函数 const originalPush = VueRouter.prototype.push //修改原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '@/views/home'), meta: { // 不显示组件(可不写 默认为false) headTip: false, } }, { path: '/noticeList', name: 'noticeList', component: () => import(/* webpackChunkName: "home" */ '@/views/noticeList'), meta: { // 是否显示组件 headTip: true, // 组件名称 headTipText: '公告通知', // 是否显示左边后退(可不填 默认true) showTiplf: true, // 是否显示右边更多(可不填 默认true) showTiprg: true, } }, ] }); export default router;
全局引用
- 为方便实用,在 app.vue 中进行判断并引用
<template> <div id="app"> <headTips v-if="$route.meta.headTip" :text="$route.meta.headTipText" :shows="$route.meta.showTiplf" :showrg="$route.meta.showTiprg" /> <router-view /> </div> </template> import headTips from "@/components/headTips"; export default { name: "App", components: { headTips, }, };
-
在vue中封装可复用的组件方法
2020-08-27 22:31:02下面小编就为大家分享一篇在vue中封装可复用的组件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
复用组件data相互影响
2021-04-24 14:55:03在一个子组件中用button控制div的显示隐藏(v-if实现),在两个div中都使用了同一个自定义组件,但是这两个组件的data相互影响。 select_show的初始值为false,可以看到这里切换游戏属性到渠道属性,属性select_... -
Vue 复用组件路由变化,页面不刷新 解决方法
2020-07-12 13:14:11路由参数变化,但是页面没有刷新这是Vue组件复用的默认处理方式 不想复用的话,就在父组件的<router-view>标签上加个key <router-view :key="$route.fullPath"></router-view> -
可复用组件封装的意义是什么?
2021-07-20 16:31:39可复用组件 本质上来讲,封装可复用组件,为了减少代码重复编写。 属性 props 事件监听 @自定义事件 插槽 slot 属性 我们可以通过给子组件标签上添加属性,子组件中通过props接收这些属性,并且根据这些属性将组件... -
如何在Vue中更好的复用组件
2020-05-11 14:09:58这里总结一下,在使用Vue时,几种复用组件的方式。 场景 表单验证是一个经常碰到的场景,表单内的不同组件常常需要有相同的验证逻辑,比如验证值非空,这里就按照这个场景来举几个例子。 使用Mixin Vue提供了 “混入... -
可缩放Reloaded-一个针对可缩放元素的复用组件
2020-10-31 00:41:18可缩放Reloaded-一个针对可缩放元素的复用组件 -
解决vue更新路由router-view复用组件内容不刷新的问题
2020-10-16 01:29:10今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
angular2+ 复用组件
2018-08-23 16:35:35一、新建SharedModule 一、新建公共组件 SqModelComponent 三、在其他模块使用的时候不用导入这些公共组件,只需要导入公共模块即可SharedModule 四、使用 有用文章: ... -
vue中复用组件时出现的数据被覆盖问题~已解决
2021-10-22 08:53:05vue中复用组件时出现的数据被覆盖的问题~已解决 项目需要,写了一个能够复用的Cascader 组件,偶然间发现了一个久远的bug… 我此时的Cascader 组件并没有加懒加载。 demo复现: 在一个页面中放入两个一模一样的组件... -
VUE之组件(插槽slot与可复用组件)
2019-10-30 19:11:38作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,大大简化了代码,增加了代码可读性。 插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 父组件传递写法 父... -
Vue手写一个弹出框复用组件
2020-06-28 21:40:46虽然现在UI框架很多有弹出框这个组件,但是自己写是不是更能体现自己的能力呢,样式也可以随意改变,哈哈,个人觉得是这样 首先创建一个message文件,里面创建一个messageBox.vue <template> <div class=... -
jsp页面代码复用组件工具:easylayout
2019-04-21 01:07:59NULL 博文链接:https://jayung.iteye.com/blog/1910954 -
小程序创建可复用组件的方法
2019-07-03 11:21:461.创建自定义组件 在my-component里面可以写自己的模板和样式,跟普通页面写法一致 2.在my-component.js定义属性,数据和方法 3.在父容器json中引入自定义组件 4.在父容器wxml中使用自定义组件 最终效果: ... -
解决vue一个页面中复用同一个echarts组件的问题
2020-10-15 02:45:40主要介绍了解决vue一个页面中复用同一个echarts组件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧