Vue组件复用多次自定义参数操作_vue同一个组件多次复用资源-CSDN文库

73 浏览量 2020-12-28 17:05:10 上传评论收藏 100KB PDF 举报

资源推荐

资源详情

资源评论

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

场景：场景：

当项目中多处出现相同的模块时，此时的正常考虑是将其做成公共组建，通过传参不同，实现多处复用

具体：具体：

背景：背景：项目使用的技术是VUE+ElementUI

此处，多处出现的模块是select选择框，封装成组件后，传给它option的值，代码如下：

<el-select

@change="handleChange"

v-model="value"

:placeholder="请选择">

<el-option

v-for="(item,index) in options"

:key="index"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</template>

export default {

data() {

return {

value: '',

}

props:['options'],

methods: {

handleChange(value) {

this.$emit('my-event',value);

}

</script>

使用时只需把文件import进来，代码如下：

</template>

import vSelect from '文件路径'

export default {

data() {

return {

options: [

{

value:0,

label:'选项一'

{

value:1,

label:'选项二'

}

components: {

vSelect

methods: {

select(value) {

console.log(value)

}

</script>

以上的话便可以实现一个组件的简单调用，选择后的值会从子组件传到父组件

问题：问题：

多处使用同一个组件时，会代表不同的选项，拿到的值也需要做不同的处理，正常也可以通过写多个方法来实现对取得的值的

不同处理，但是这种方法不够灵活。

解决：解决：

此时自然而然想到的一种解决方法就是给上面的select函数再增加一个参数，根据参数不同进行不同的处理

但是真正实施起来却发现会出现很多问题。

其实解决方法很简单，就是一开始没转过来弯，还是花了一些时间，最终的解决方案就是使用回调函数：

<vSelect :options="options" @my-event="val=>select(val,param)"></vSelect>

select(value,param) {

console.log(value,param)

}

回过头来看，真的觉的这个压根都不能算作一个问题，就当记录一下作为Vue组件使用的初级教程吧，希望能够帮助到一些

人。

补充知识：补充知识：VUE之组件（插槽之组件（插槽slot与可复用组件）与可复用组件）

插槽插槽slot

当子组件部分内容是通过父组件传递DOM进行显示时，可以不用父组件props传值的比较挫的语法，Vue中提供了一种新型语

法：插槽slot。

废话不多说看代码：

<my-blog>

<p>白雪公主和七个小矮人</p>

</my-blog>

</div>

// vue代码

Vue.component('my-blog',{

template:`

<div>

<span>恶毒的皇后</span>

</div>`

})

var app=new Vue({

el:"#app",

})

命名由来：命名由来：

这种语法看起来像是用子组件直接往里直接插DOM内容，所以称之为插槽。

小结：小结：

1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使

模板分块，具有模块化的特质和更大的重用性；

2、插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

插槽分类有很多种，本节将一一介绍插槽分类有很多种，本节将一一介绍

（1）单个插槽/默认插槽

（2）具名插槽

（3）作用域插槽

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38517997

粉丝: 3
资源: 922

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

解决vue同一slot在组件中渲染多次的问题

vue组件与复用详解

解决vue一个页面中复用同一个echarts组件的问题

详解Vue.js组件可复用性的混合(mixin)方式和自定义指令

在vue中多次调用同一个定义全局变量的实例

Vue一次性简洁明了引入所有公共组件的方法

封装canvas各种方法的vue组件

基于antdesign的vue组件

vue自定义开关组件.zip

Vue-第4章 深入理解 Vue 组件

Vue全家桶（二）：Vue组件化开发（视频课程）.zip

vue项目中常用的自定义指令

vue第三章组件.pdf

vue之封装自己的树组件视频

vue自定义指令合集 vue2.0版本

vue.js 自定义指令directives，Vue.directive使用

Vue2图片选择上传组件支持多选和拖放

el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf

canvas 绘制的 vue 表格组件，解决上万行+多列数据渲染问题，集成大部分表格功能.zip

详解vue 自定义marquee无缝滚动组件

使用Vue自定义数字键盘组件(体验度极好)

Vue自定义指令封装节流函数的方法示例

VUE面试题目VUE基础

vue-form-making-master.zip

vue动态加载外部依赖js代码实现

vue2+vue3学习笔记

最新资源

Vue-第4章深入理解 Vue 组件