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


Posted in Javascript onJuly 27, 2020

场景:

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

具体:

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

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

<!--组件文件 比如说这个组件叫 vSelect 下面会用-->
<template>
  <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>

<script>
 export default {
  data() {
    return {
      value: '',
    }
  },
  props:['options'],
  methods: {
    handleChange(value) {
      this.$emit('my-event',value);
    }
  },
  
 }
</script>

使用时只需把文件import进来,代码如下:

<template>
  <vSelect :options="options" @my-event="select"></vSelect>
</template>
<script>
  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。

废话不多说看代码:

<!-- html代码 -->
 <div id="app">
  <my-blog>
  <h2>格林童话</h2>
  <cite>格林兄弟</cite>
  <p>白雪公主和七个小矮人</p>
  </my-blog>
 </div>
// vue代码
 Vue.component('my-blog',{
  template:`
  <div>
   <slot></slot>
   <span>恶毒的皇后</span>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

命名由来:

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

小结:

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

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

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

(1)单个插槽/默认插槽

(2)具名插槽

(3)作用域插槽

(4)解构插槽

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

出现缘由:

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

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

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

(1)宿主元素不为空时,显示宿主元素里内容,不显示备用内容

<!-- html代码 -->
 <div id="app">
  <my-blog></my-blog>
 </div>
// vue代码
 Vue.component('my-blog',{
  template:`
  <div>
   <slot>备用内容</slot>
   <span>恶毒的皇后</span>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

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

官方文档描述:

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

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

通俗理解:

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

具名插槽

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

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

<!-- html代码 -->
 <div id="app">
  <my-blog>
  <h2 slot="header">格林童话</h2>
  <cite>格林兄弟</cite>
  <p slot="footer">白雪公主和七个小矮人</p>
  </my-blog>
 </div>
// vue代码
 Vue.component('my-blog',{
  template:`
  <div>
   <slot name="header"></slot>
   <span>恶毒的皇后</span>
   <slot></slot>
   <slot name="footer"></slot>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

具名插槽小结

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

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

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

作用域插槽slot

简介:

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

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

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

作用域插槽案例:

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template slot-scope="props">
   {{props.data}}
  </template>
  </my-blog>
 </div>
 // vue代码 
 // 1.子组件传递数据
 Vue.component('my-blog', {
  template: `<div>
  <slot :data="text"></slot>
  
  </div>`,
  data() {
  return {
   text: '喜欢福安'
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

注意:

(1)在父级中,具有特殊特性 slot-scope 的 元素必须存在,表示它是作用域插槽的模板(在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 )。

(2)slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象

(3)在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样,接下来父组件中使用 slot-scope 特性从子组件获取数据

案例:blog子组件可能在很多地方调用,希望在不同地方调用blog组件时

但是:注意这里要求列表的循环和样式不是由子组件决定,而是外部决定的,修改代码如下

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template slot-scope="props">
   <h1>{{props.data}}</h1>
  </template>
  </my-blog>
  <my-blog>
  <template slot-scope="props">
   <h4>{{props.data}}</h4>
  </template>
  </my-blog>
 </div>
// vue代码 
 // 1.子组件传递数据
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: ["汪汪队","彩虹宝宝","天线宝宝","苏菲亚","大头儿子小头爸爸","熊出没"]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

条件判断渲染

到目前为止,便可以在元素上随便操作了

例如:当名字长度等于3的时候,在前面加个“你好”标志

代码如下

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template slot-scope="props">
   <h1 v-if="props.data.length==3">新推荐--{{props.data}}</h1>
   <h1 v-else>{{props.data}}</h1>
  </template>
  </my-blog>
  
 </div>
 // vue代码 
 // 1.子组件传递数据
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: ["汪汪队","彩虹宝宝","天线宝宝","苏菲亚","大头儿子小头爸爸","熊出没"]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

作用域插槽slot-scrop新语法

版本:自 2.6.0 起有所更新,已废弃使用 slot-scope 语法,开始使用v-slot进行替代,如下所示

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template v-slot="props">
   <h1 v-if="props.data.length==3">新推荐--{{props.data}}</h1>
   <h1 v-else>{{props.data}}</h1>
  </template>
  </my-blog>
  
 </div>

解构插槽:

v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JS表达式。所以在支持的环境下 (单文件组件或现代浏览器),你也可以使用 ES2015 解构来传入具体的插槽 prop,如下:

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template v-slot="{data}">
   <h1 v-if="data.length==3">新推荐--{{data}}</h1>
   <h1 v-else>{{data}}</h1>
  </template>
  </my-blog>
 </div>
// vue代码 
 // 1.子组件传递数据
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: ["汪汪队","彩虹宝宝","天线宝宝","苏菲亚","大头儿子小头爸爸","熊出没"]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

作用域插槽slot-scrop新语法

你甚至可以定义后备内容,用于插槽 prop 是 undefined 的情形

<!-- html代码 -->
 <div id="app">
  <!-- 利用solt-scope获取数据 -->
  <my-blog>
  <template v-slot="{data='这部电视禁播了'}">
   <h1 v-if="data.length==3">新推荐--{{data}}</h1>
   <h1 v-else>{{data}}</h1>
  </template>
  </my-blog>
 </div>
// vue代码 
 // 1.子组件传递数据
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: ["汪汪队","彩虹宝宝","天线宝宝","苏菲亚",undefined,"熊出没"]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

编写可复用组件注意事项:

在编写组件时,最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系,但是可复用组件应当定义一个清晰的公开接口,同时也不要对其使用的外层数据作出任何假设。

Vue 组件的 API 来自三部分——prop、事件和插槽:

1、Prop 允许外部环境传递数据给组件;

2、事件允许从组件内触发外部环境的副作用;

3、插槽允许外部环境将额外的内容组合在组件中。

以上这篇Vue 组件复用多次自定义参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
You might like
ThinkPHP写第一个模块应用
2012/02/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
浅析vue-router原理
2018/10/19 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
用Python设计一个经典小游戏
2017/05/15 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
纽约海:Sea New York
2018/11/04 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
公司承诺函范文
2015/01/21 职场文书
导游词之西递宏村
2019/12/10 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript