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

场景:

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

具体:

背景:项目使用的技术是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 组件复用多次自定义参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue2.0 自定义组件的方法(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据

  • 解决vue 按钮多次点击重复提交数据问题

    这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型 <template> <button @click="submit()" :disabled="isDisable">点击</button> </template> <script> export default { name: 'TestButton',

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中传递一个自定义参数i,原本是这样写的: :on-success="handleSuccess(i)" //handleSuccess是一个方法 但是发现这样写取不到自身原来的参数,后来在网上找到了一个比较好的方法,如下: :on-success="(value)=> han

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

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

  • 详解Vue组件复用和扩展之道

    概述 软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要 要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有

  • vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • Vue组件之自定义事件的功能图解

    使用v-on绑定自定义事件 (一)基于webpack的项目初始化 在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下 进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹 vue init webpack myapp 安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图 安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们

  • vue组件与复用详解

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

  • vue组件讲解(is属性的用法)模板标签替换操作

    vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样 <div class="language-html"> <ul> <li is="row"></li> </ul> </div> 这样会保证dom结构在浏览器的正常渲染,尽量避免在不正确的结构中直接使用组件 <script> Vue.com

  • vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

随机推荐