分类：组件

2020
10-10

vue组件中实现嵌套子组件案例

如何把一个子组件comment.vue放到一个组件中去1、先创建一个单独的comment.vue组件模板<template><divclass="cmt-container"><h3>发表评论</h3><hr><textareaplaceholder="请输入要BB的内容（最多吐槽120字）"maxlength="120"></textarea><mt-buttontype="primary"size="large">发表评论</mt-button><divclass="cmt-list"><divclass="cmt-item"><divclass="cmt-title">第... 继续阅读 >

2020
10-10

详解vue组件之间的通信

说明：下面我总结了比较常用的vue组件之前通信的方式，最近准备面试，所以有些总结贴上来分享props和$emit只有父子关系才可以用这种方式，父组件向子组件传递参数用props，子向父传递使用触发$emit自定义事件1.props<!--parent.vue,可以传递`静态`的props和`动态`的props,静态的参数只能是个String类型的，如果是其他类型的一定要记得加`:`来表示这是一个js表达式而不是一个字符串--><Child:name="name":age="18"address=... 继续阅读 >

2020
10-09

vue之封装多个组件调用同一接口的案例

背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法直接return接口调用的结果exportfunctiongetAll(){letall=[];letopt={method:'get',url:'all/teacher',success:res=>{all=res.data.value||[];},fail:err=>{tipInfo(err.data.desc,'提示',false,'warning');}};$http(opt);returnall;}console.log(getAll());//[]$http是在axios基础进行... 继续阅读 >

2020
10-09

VUE使用 wx-open-launch-app 组件开发微信打开APP功能

在微信中开发使用vue框架，通过wx-open-launch-app微信自定义注册组件开发微信H5打开app功能template<template><divclass="beva-home"><!--=====微信浏览器打开贝瓦APP=====--><divclass="weixin-open-app"v-if="openAppState"><imgclass="close-icon":src="icon.close"alt="关闭"@click="handleCloseOpenAppMask"><divclass="detail">微信端暂不支持音视频播放，请到APP观看收听。</div><divclas... 继续阅读 >

2020
10-08

vue中的v-model原理,与组件自定义v-model详解

VUE中的v-model可以实现双向绑定，但是原理是什么呢？往下看看吧根据官方文档的解释，v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为:value=""和@input=""，就像下面这样//标准写法<inputv-model="name">//等价于<input:value="name"@input="name=$event.target.value">//在组件上面时<div:value="name"@input="name=$event"></div>1.当在input输入框输入内容时，会自动的触发input事件，... 继续阅读 >

2020
10-08

如何在Vue.JS中使用图标组件

原文链接：https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30本文对原文进行一次翻译，并从React开发者的角度简单地做了一些解读。此文不包含字体图标和SVGsprite。仅在此讨论允许用户按需导入的图标系统。TherearethreemajorwaysofexposingAPIofaniconcomponentinVue.jsandeachoneofthemhasitsownpros&cons:在Vue.js的生态里，有3种主流的API形态，它们有各自的优缺点：1.使用单一的... 继续阅读 >

2020
10-08

vue 组件简介

什么是组件？web的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。web页面就是由一个个类似这样的部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响... 继续阅读 >

2020
10-08

浅谈vue 组件中的setInterval方法和window的不同

vue组件中，this指向实例，【实例中重写了setInterval等一整套方法】。所以，千万不能和window下挂载的方法混用具体不同在于，window.setInterval执行完比后返回一个id，而vue实例中返回【定时器对象】，当然该对象中包含一个_id的私有属性因为clearInterval方法参数是id，所以最佳实践是统一使用window的方法，不要使用vue组件的方法vue中的定时器方法，要使用箭头函数，不要出现constthat=this的写法//正确的用法mou... 继续阅读 >

2020
10-08

Vue组件跨层级获取组件操作

this.$parent访问父实例this.$children当前实例的直接子组件。(不保证顺序,不是响应式)this.$parent.$parent.$refs.xxx跨级访问父组件this.$children.$children.$refs.xxx跨级访问子组件这种递归的方式代码繁琐性能低效ref只能获取当前组件上下文组件无法跨层级ref是字符串被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在... 继续阅读 >

2020
10-08

Vue 组件复用多次自定义参数操作

场景：当项目中多处出现相同的模块时，此时的正常考虑是将其做成公共组建，通过传参不同，实现多处复用具体：背景：项目使用的技术是VUE+ElementUI此处，多处出现的模块是select选择框，封装成组件后，传给它option的值，代码如下：<!--组件文件比如说这个组件叫vSelect下面会用--><template><el-select@change="handleChange"v-model="value":placeholder="请选择"><el-optionv-for="(item,index)inoptions"... 继续阅读 >

2020
10-08

如何在C#中调用COM组件

一、引言COM（ComponentObjectModele,组件对象模型）是微软以前推崇的一个开发技术，所以现在微软的很多产品都用到了COM组件，如Office,IE等。然而如果.NET平台下的程序想访问COM组件的方式来实现某个功能怎么办呢？正是由于开发人员有这个需求，所以微软在.NETFrameWork中为COM和托管代码之间进行互操作提供了支持，这种互操作性的技术就是COMInterop。但是COMInterop(COm互操作)这项技术，不仅支持在托管代码中使用... 继续阅读 >

2020
10-08

vue2.* element tabs tab-pane 动态加载组件操作

一、重要部分1、注意<component:is=item.content></component>：表明模板<el-tab-panev-for="(item)ineditableTabs":key="item.name":label="item.title":name="item.name"><component:is=item.content></component></el-tab-pane>2、content:'Jbxx'，其中jbxx是模板addTab(targetName,route){letnewTabName=++this.tabIndex+''this.editableTabs.push({title:tar... 继续阅读 >

2020
10-08

快速了解Vue父子组件传值以及父调子方法、子调父方法

稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码：1、父传值给子组件父组件：<template><div><pclass="father">父组件</p><child:sid="id"></child></div></template><script>importchildfrom'./child'exportdefault{components:{child},data(){return{id:'0920',//父组件向子组件传的值}},}</script>子组件：<template><div><pcla... 继续阅读 >

2020
10-08

实例讲解React 组件生命周期

在本章节中我们将讨论React组件的生命周期。组件的生命周期可分成三个状态：Mounting：已插入真实DOMUpdating：正在被重新渲染Unmounting：已移出真实DOM生命周期的方法有：componentWillMount在渲染前调用,在客户端也在服务端。componentDidMount:在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个... 继续阅读 >

2020
10-08

实例讲解React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。接下来我们封装一个输出"HelloWorld！"的组件，组件名为HelloMessage：functionHelloMessage(props){return<h1>HelloWorld!</h1>;}constelement=<HelloMessage/>;ReactDOM.render(element,document.getElementById('example'));实例解析：1、我们可以使用函数定义了一个组件：functionHelloMessage(props){return<h1>HelloWorld!</h1>;}你也可以使... 继续阅读 >

2020
10-08

Vue如何实现监听组件原生事件

在首页开发中，右下角有一个返回顶部的小箭头，将它单独封装成一个BackTop组件，但是它何时出现需要依赖于首页的滑动，即另外一个Scroll组件。如果直接在BackTop组件里面监听，则需要通过this.$emit将事件发射到Home组件中，又在Home中监听自定义事件，比较复杂。因此，我们直接在Home中对BackTop组件进行监听，使用.native官网对于native的解释为:.native：监听组件根元素的原生事件代码如下：在Home.vue中对back-top组件进行点... 继续阅读 >