在vue中使用inheritAttrs实现组件的扩展性介绍

1、首先我们创建一个input组件

<template>
 <div class="inputCom-wrap">
 <input v-bind="$attrs" />
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
 inheritAttrs:false,//不希望根直接继承特性，而是使用$attrs自定义继承，当前组件的根就是inputCom-wrap
 setup () {
 return {}
 }
})
</script>

<style scoped>
</style>

2、使用组件的时候，随便增加一些属性，如

<inputCom type="text" class="input-a"></inputCom>

<inputCom type="password" class="input-b"></inputCom>

3、查看最终的渲染结果为(与props不会冲突)

补充知识：vue组件深层传值inheritAttrs、$attrs、$listeners

1、$attrs

组件深层传值 可通过父组件绑定 v-bind="$attrs"传给子组件

一般子组件this.$attrs可以拿到父组件的所有传输的属性。

当子组件props注册了声明某属性之后，this.$attrs将不包含该属性；

同理通过v-bind="$attrs"绑定孙子组件也不会包含子组件props声明的属性。

props: {
 data:{
 type: Array,
 default: () => [],//数组格式[{label:xx,value:xxx}]
 },
 value: {
 type: Array,
 default: () => [],//数组格式[xx,xx,xx]
 },
 maxHeight:{
 type:[String,Number],
 default:350,
 }
 },

mounted() {
 console.log("来自多选",this.$attrs)

 },

2、inheritAttrs

默认值为true

默认情况子组件props未声明，父组件传输的其他属性会被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上（有可能会覆盖子组件根元素上的某些属性列如 type="text"之类属性）

子组件的inheritAttrs 设置为false可以避免

3、$listeners

父组件-子组件-孙子组件，现在我要你在孙子组件里改变父组件的值，子组件直接绑定

<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>

以上这篇在vue中使用inheritAttrs实现组件的扩展性介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router定义元信息meta操作

    vue-router定义元信息meta操作

    router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AVie

  • Vue $attrs & inheritAttr实现button禁用效果案例

    Vue $attrs & inheritAttr实现button禁用效果案例

    components/Button.vue <template> <div> <button :disabled="$attrs.disabled">点击</button> </div> </template> <script> export default { inheritAttrs: false, } </script> <style scoped> </style&

  • vuex Module将 store 分割成模块的操作

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, gette

  • 在vue中使用inheritAttrs实现组件的扩展性介绍

    在vue中使用inheritAttrs实现组件的扩展性介绍

    1.首先我们创建一个input组件 <template> <div class="inputCom-wrap"> <input v-bind="$attrs" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent

  • 在 Vue 中编写 SVG 图标组件的方法

    在考虑了将矢量图标从图标字体迁移到内联 SVG 的 原因 之后,我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案,同时仍能保持使用图标字体的灵活性和易用性--能够使用 CSS 轻松改变图标的大小.颜色以及其它属性. 一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中,并在 Vue 的生命周期函数 mounted() 中修改渲染的 <svg> 元素.CSS 样式可以直接应用到 <svg> 元素

  • Vue中正确使用Element-UI组件的方法实例

    一.CDN 目前可以通过 unpkg.com/element-ui获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unp

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • vue中使用v-model完成组件间的通信

    以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">

  • 在vue中封装的弹窗组件使用队列模式实现方法

    前言 由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器 什么是队列 队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue

  • 在vue中使用防抖函数组件操作

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

  • vue 自定义全局方法,在组件里面的使用介绍

    在main.js里进行全局注册 Vue.prototype.funcName = function (){} 在所有组件里可调用 this. funcName(); 以上这篇vue 自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐