-
vue中如何创建自定义组件并引入组件【详细教程】
2019-04-25 15:49:42今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目中专门...今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。
1,在你的项目中专门创建一个放置自定义组件的文件夹(我是放在了components底下的common中,本文以table.vue为例)
2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式(本文为例:<v-table></v-table>,因为我在定义table模块的时候是定义name:v-table,所以引用的时候,也必须得用所在table模块中name定义的名字);
3、在index.vue中引入table.vue模块
//index.vue 页面 ,引入v-table模块 <div class="table"> <v-table></v-table> //这就是你引入的自定义模块;注意是驼峰命名法 </div>
4、在index.vue页面引入该组件(注意:table.vue,我是在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)
//index.vue <script> import vTable from '../../components/common/table' //table.vue(注意,我在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件) export default { name: "index", components: { vTable }, } </script>
ps:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。
另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。
比如:
总结:
vue组件命名问题:
1、别用驼峰式命名 因为 vue webpack编译后 ,他统一会变成小写(顾名思义:骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这就叫驼峰命名;)
2、最好加个前缀 比如 <v-table></v-table>或者<v_table></v_table>
❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢大白兔分享的文章,就给大白兔点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号:708072830】
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)
-
Android组件设计思想
2013-10-23 01:11:07Android应用开发的哲学是把一切都看作是组件。把应用程序组件化的好处是降低模块间的耦合性,同时提高模块的复用性。Android的组件设计思想与传统的组件设计思想最大的区别在于,前者不依赖于进程。也就是说,进程... -
-
react函数式组件和类组件创建ref的方法
2019-06-30 15:34:08在react开发过程中,有时会碰到一些需求需要我们去操控dom,那么我们就可以给组件挂载一个ref属性,然后就可以通过ref调用这个组件的方法或者属性之类的。 接下来我们就来看看函数组件和类组件都是如何去挂载创建ref...在react开发过程中,有时会碰到一些需求需要我们去操控dom,那么我们就可以给组件挂载一个ref属性,然后就可以通过ref调用这个组件的方法或者属性之类的。
接下来我们就来看看函数组件和类组件都是如何去挂载创建ref和使用它的:
函数式组件(Hook):
// 首先引入React及useRef import React, { useRef } from 'react; function Content() { // 创建ref const fileInputEl = useRef(null); return ( <> {/* 在你的元素或者组件上面挂载ref */} <input ref={fileInputEl} type={'file'} hidden /> {/* 使用ref */} {/* 当点击这个div的时候触发input的点击事件 */} <div onClick={() => fileInputEl.current.click()}>上传文件</div> </> ) }
类组件创建使用ref
// 引入React import React, { Component } from 'react'; export default class Content extends Component { constructor(props) { super(props); // 通过React.createRef()创建ref,挂载到组件上 this.editTableEl = React.createRef(); } componentWillReceiveProps() { // 当走入componentWillReceiveProps生命周期时会触发此ref挂载到的组件的refreshDataSource()方法(PS:这个方法是自己在挂载ref的那个组件中定义的) this.editTableEl.current && this.editTableEl.current.refreshDataSource(); } render() { return ( <div> <EditableTable // 挂载ref ref={this.editTableEl} /> </div> ) } }
-
vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染
2018-06-24 20:31:171在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法
props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatter: { type: String, default: '' }, opinion: { type: Array, default() { return [] } }, seriesName: { type: String, default: '' }, opinionData: { type: Array, default() { return [] } }
}
//watch进行监听
watch:{ titleText:function(newValue,oldValue){ this.getChange(); }, echartStyle:{ handler(newValue,oldValue){ this.getChange(); }, deep:true }, tooltipFormatter:function(newValue,oldValue){ this.getChange(); }, opinion:{ handler(newValue,oldValue){ this.getChange(); }, deep:true //深度监听 }, seriesName:function(newValue,oldValue){ this.getChange(); }, opinionData:{ handler(newValue,oldValue){ this.getChange(); }, deep:true } },
2 在父组件中用ref="str" 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法
来 重新渲染(暂时使用有bug,不能够及时渲染,父组件值已经改变了,但是子组件值仍然没有改变,不能够及时渲染)
这个方法感觉props'接收数据在调用方法之后,明明父组件的值已经改变了,但是父组件在调用子组件方法时,数据仍然没有 接收到,调用之后才接收到,这个方法暂且没用,应该是声明ref的时候声明的是当前组件的实例,然后调用时调用的也是值未改变时的属性。这个没什么用,可以用来调用子组件方法。
<pie-chart2 ref="pieChart" :echartStyle="echartStyle" :titleText="titleText" :tooltipFormatter="tooltipFormatter" :opinion="opinion" :seriesName="seriesName" :opinionData="opinionData" > </pie-chart2>
refresh:function(){ if(!this.bindData.data){ this.bindData.data = this.bindData.configures; } this.bindData.id = this.bindData.moduleId ||'pir'; if(this.bindData.data){ alert(this.bindData.data.name); this.changeContent(this.bindData.data); this.getChartData(this.bindData.data); this.$refs.pieChart.getChange(); } },
3 在子组件上使用 v-if ="flag" (谢谢各位老哥的建议)
初始flag:true
修改data时
changData(data){
this.flag = false
this.data =data
this.$nexttck(()=>{
this.flag = true;
})
}
-
Vue子组件向父组件传值(this.$emit()方法)
2018-08-13 19:10:46子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 ...子组件使用this.$emit()向父组件传值
首先必须在父组件中引用子组件,然后实现传值
-
第一步 在父组件中引入子组件
使用import引入组件
import indexImportOrder from './components/indexImportOrder'
声明
//定义组件 components:{ indexImportOrder, },
使用
<indexImportOrder ref="indexImportOrder"/>
-
第二步 子组件向父组件传值
1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数,param为需要传递参数
//新订单页面跳转 viewBusiness(){ let flag = false; this.$emit('closeMain',flag); },
2. 在父组件中子组件引用处添加函数v-on:function="function1"; //其中function为子组件中定义函数,function1为父组件定义函数--用于接收子组件传值并进行相应数据处理,可定义为同一名称
v-on: 可用 @ 代替 @function="function1" ,@ 为 v-on:的简写
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
val及为子组件中flag,即接收的子组件参数
closeMain(val){ this.flag = val; },
更详细解释可参照:https://www.cnblogs.com/padding1015/p/7878741.html
-
-
vue之router-view组件的使用
2018-04-26 19:01:08开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,蛋是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。... -
Vue子组件调用父组件的方法
2019-09-03 22:03:43Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div&... -
React的无状态组件和纯组件
2019-05-11 21:50:50react的无状态组件和纯组件 一:无状态组件 无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。 从本质上来说,无状态组件就是一个单纯的... -
SpringCloud五大组件详解
2019-04-23 10:15:10SpringCloud分布式开发五大组件详解 服务发现——Netflix Eureka 客服端负载均衡——Netflix Ribbon 断路器——Netflix Hystrix 服务网关——Netflix Zuul 分布式配置——Spring Cloud Config Eureka 一个... -
vue子组件给父组件传值
2018-08-21 10:28:12子组件: <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </... -
React中使用路由进行父子组件的通信
2020-06-19 23:10:08最近我在学习 React.js 框架,在此记录一下我使用 react-router-dom 来实现单页应用(SPA)的路由跳转时,怎么处理父子组件间的通信。本文使用的是 HashRouter。 父组件中的路由配置 /** * 我使用了 react-router... -
Vue.js 父组件向子组件传值和子组件向父组件传值
2019-02-24 21:58:11父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 &lt;script&gt; // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { ... -
Vue子组件给父组件传值 父组件给子组件传值 demo 示例代码
2019-08-15 10:38:01QQ技术交流群173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 ...3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。 效果图: 实现代码: &... -
react之组件介绍
2019-04-21 09:57:50ReactJS是基于组件化的开发。 那么有些朋友会有疑问,组件是什么? 所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小... -
React的父子组件通信
2019-05-10 17:59:01首先要知道React的组件间通讯是单向的。 -
vue中组件通信(父子组件, 爷孙组件, 兄弟组件)
2018-09-04 16:38:06vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而... -
ElementUI中的el-table表格设置全透明(组件化开发和html两种方式)
2020-10-28 04:50:02/*最外层透明*/ .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ ...组件化开发 less则需要加上/deep/生效,还有注意作用域要是scoped<style scoped& -
分享几个比较好用 js 表格组件、vue 表格组件(持续更新)
2019-06-06 16:23:43Vue 常用的表格组件(持续更新) element-ui https://element.eleme.cn/2.9/#/zh-CN/component/table 表格组件 iview https://iviewui.com/components/table 表格组件 vxe-table ... -
vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
2018-06-07 16:12:08父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild> 2.在父组件里面通过 this.$refs.headerChild.... -
react父组件调用子组件方法
2018-02-26 09:48:17前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个 父组件直接调用子组件方法, 也类似. 先看代码,比较直观. import React, {Component} from 'react'; export default ... -
react子组件向父组件传值,父组件获取子组件的数据和方法
2019-03-05 19:17:58在使用模块化开发,经常会遇到组件之间的传值问题,这篇说一下react子组件如何向父组件传值,父组件如何获取子组件的数据和方法 父组件: import React, { Component } from 'react'; import Header from './Header.... -
vue父组件使用子组件函数,vue子组件使用父组件函数
2019-04-29 16:53:50(1)vue中父组件调用子组件函数 用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件... -
react组件创建的3种方法
2019-04-21 10:23:52今天给朋友们带来React创建组件的三种方式介绍。 1. 函数式无状态组件 2. es5方式React.createClass组件 3. es6方式extends React.Component 三种创建方式的异同: 1.函数式无状态组件: 1. 语法: function ... -
详细教学vue子组件和祖父组件的通讯
2020-09-26 14:25:21本文的目录1,子组件向祖父组件传值2,祖父组件向子组件传值 1,子组件向祖父组件传值 son是father的子组件,father是grandfather的子组件。 1,son组件 <son @click="clickson"/> <script > export ... -
子组件向父组件传值和父组件向子组件传值
2018-04-18 08:23:07父组件向子组件传值成功总结如下: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋值给该属性1.在子组件中创建... -
vue父组件给子组件传值、方法、整个实例
2019-02-19 10:14:06父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title='title' :homemsg='msg'></v-header> 2.在子组件里面通过 props接收父组件传过来的数据 ... -
微信小程序中父组件向子组件传值与子组件向父组件传递参数
2020-07-03 11:50:41wx小程序中父组件向子组件传值可以通过标签属性进行传值 父组件 子组件中在js文件中的properties中 properties:{ fu:{ type:Number, value:"" } } 以上是子组件向父组件传递参数 wx小程序中子组件向父组件... -
Vue子组件给父组件传值 父组件给子组件传值(附源码)
2019-08-21 10:54:18Vue子组件给父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在...
-
32位IE11升级包.zip
-
基于Qt+OpenCV的人体特征检测系统 iTop-4412 ARM opencv QT
-
DCDC并联均流MATLAB仿真
-
ThreadLocal的实现原理
-
Educational Codeforces Round 102 (Rated for Div. 2) D
-
一文带你理解《A Survey on Performance Metrics for Object-Detection Algorithms 》,目标检测中的指标计算。
-
HCIP——vlan
-
three.js入门速成
-
JavaEE框架(Maven+SSM)全程实战开发教程(源码+讲义)
-
lsof-master
-
STM32+UIP+WEB Server
-
技术学习书签20210119
-
level0 -- 攻防世界新手题
-
WH80QD调质型高强钢板产地舞钢执行舞钢推荐标准调质热处理.doc
-
python数据分析基础
-
计算机网络基础
-
转行做IT-第1章 计算机基础
-
2021-01-19
-
python办公自动化技巧
-
pyechart数据可视化