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

2023-07-19 20:06:03 264

场景：

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

具体：

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

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

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

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

问题：

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

解决：

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

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

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

select(val,param)">

select(value,param){
console.log(value,param)
}

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

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

插槽slot

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

废话不多说看代码：




格林童话
格林兄弟
白雪公主和七个小矮人

//vue代码 Vue.component('my-blog',{ template:`

恶毒的皇后

` }) varapp=newVue({ el:"#app", })

命名由来：

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

小结：

1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性；

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

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

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

（2）具名插槽

（3）作用域插槽

（4）解构插槽

插槽分类一：单个插槽(备胎插槽)

出现缘由：

最初在标签中的任何内容都被视为备用内容。

备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

插槽分类一：单个插槽(备胎)

（1）宿主元素不为空时，显示宿主元素里内容，不显示备用内容

//vue代码 Vue.component('my-blog',{ template:`

备用内容恶毒的皇后

` }) varapp=newVue({ el:"#app", })

注意：此时上面没有内容的情况下会自动填上默认的内容

官方文档描述：

Vue实现了一套内容分发的API，将元素作为承载分发内容的出口

插槽内可以包含任何模板代码，包括HTML模板代码，甚至可以是其它的组件。

通俗理解：

没有插槽的情况下在组件标签内写一些内容是不起任何作用的，当在组件中声明了插槽元素后，在组件元素内写的内容就会跑到它这里了，即插槽此时充当承载分发内容的出口！

具名插槽

首先看个案例，结合案例了解下具名插槽的概念

（1）在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer。即通过给slot添加name属性，来指定当前slot的名字




格林童话
格林兄弟
白雪公主和七个小矮人

（1）具名插槽其实就是在父组件中添加一个slot=‘自定义名字'的属性，然后在子组件中的里面添加name=‘自定义名字'即可

（2）如果父组件中有一部分没有添加slot属性，则此处就是默认的插槽，在子组件中的直接就是使用的父组件的默认插槽部分

（3）如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

作用域插槽为Vue2.1.0版本新增，是一种特殊类型的插槽，用作一个(能被传递数据的)可重用模板，来代替已经渲染好的元素。

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

不过，我们可以在父组件中使用slot-scope特性从子组件获取数据。前提是需要在子组件中使用:data=data先传递data的数据。

新推荐--{{props.data}} {{props.data}}

//vue代码 //1.子组件传递数据 Vue.component('my-blog',{ template:`

`, data(){ return{ texts:["汪汪队","彩虹宝宝","天线宝宝","苏菲亚","大头儿子小头爸爸","熊出没"] } } }) varapp=newVue({ el:"#app", })

新推荐--{{data}} {{data}}

//vue代码 //1.子组件传递数据 Vue.component('my-blog',{ template:`

`, data(){ return{ texts:["汪汪队","彩虹宝宝","天线宝宝","苏菲亚","大头儿子小头爸爸","熊出没"] } } }) varapp=newVue({ el:"#app", })

新推荐--{{data}} {{data}}

//vue代码 //1.子组件传递数据 Vue.component('my-blog',{ template:`

`, data(){ return{ texts:["汪汪队","彩虹宝宝","天线宝宝","苏菲亚",undefined,"熊出没"] } } }) varapp=newVue({ el:"#app", })

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

格林童话

{{props.data}}

{{props.data}}

热门推荐

随机推荐