Vue中v-bind=“$attrs”的使用方法

这篇具有很好参考价值的文章主要介绍了Vue中v-bind=“$attrs”的使用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

$attrs

主要用于组件之间的隔代传值。例如有 父组件A,子组件B,孙组件C 三个组件。
在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中用prop接收,此时就直接把值传给了C。

用法如下:

组件A

<template>
  <bCom msg='123'/>
</template>

组件B

<template>
  <cCom v-bind="$attrs"/>
</template>

组件C

<template>
  <div>A传递过来的值:{{msg}}</div>
</template>

<script>
export default {
  name: 'cCom',
  props: {
    msg:{ //接收A传递的msg
      typeof:String,
      default:''
    }
  },
}
</script>

组件隔代通讯其它相关用法:

Vue中v-on=“$listeners“的使用方法https://blog.csdn.net/weixin_44594219/article/details/127259825?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127259825%22%2C%22source%22%3A%22weixin_44594219%22%7Dvue2中EventBus的使用方法https://blog.csdn.net/weixin_44594219/article/details/127248681?spm=1001.2014.3001.5502文章来源地址https://www.toymoban.com/news/detail-633960.html

到了这里,关于Vue中v-bind=“$attrs”的使用方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Vue基础 - v-bind修改属性

    div id=\\\"app\\\" label for=\\\"r1\\\"修改颜色/labelinput type=\\\"checkbox\\\" v-model=\\\"use\\\" id=\\\"r1\\\" brbr div v-bind:class=\\\"{\\\'class1\\\': use}\\\"    !--如果use为true,则{\\\'class1\\\': use}=class1,否则为空-- v-bind:class 指令 /div /div script new Vue({ el: \\\'#app\\\', data:{     use: false    //这里赋值为false,所以没有调用class1 } }); /script

    2024年01月23日
    浏览(10)
  • 五、vue基础-指令之v-bind

    五、vue基础-指令之v-bind

    前面要讲的一系列指令,主要是将值插入到 模板内容 中。  但是,除了内容需要动态来决定外,某些 属性 我们也希望动态来绑定。 比如动态绑定a元素的href属性; 比如动态绑定img元素的src属性; 绑定属性我们使用v-bind: 缩写:冒号(:) 预期:any(with argument) | Object(without

    2024年02月08日
    浏览(19)
  • vue 简单实验 v-bind 变量与html属性绑定

    vue 简单实验 v-bind 变量与html属性绑定

    1.代码 2.运行结果  

    2024年02月11日
    浏览(12)
  • vue中v-bind和v-model的区别

    v-bind 和 v-model 是Vue.js中的两个常用指令,它们在功能和用途上有一些区别。 v-bind 指令(或简写为 : )用于动态 绑定数据到HTML属性 (不是双向的)。它允许您将Vue实例的数据绑定到HTML元素的属性上,并根据数据的变化动态更新属性的值。可以使用 v-bind 指令来实现属性的动态

    2024年02月13日
    浏览(12)
  • vue3中常用的指令之v-bind和v-on

    vue3中常用的指令之v-bind和v-on

    一个vue2和vue3之间的不同之处:Vue2中template模板中只能有一个根元素,但是在Vue3中允许template中有多个元素。 1.v-bind的绑定基本属性 某些属性也希望是动态绑定的,比如动态绑定a元素中的href属性。 v-bind可以绑定一个或者多个属性值,或者向另一个组件中传递props值。 v-bind

    2024年02月16日
    浏览(12)
  • vue及js中使用function及箭头函数定义方法

    目录 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 在vue中,我们通过v-on指定来绑定要指定的方法,可以使用function或const箭头函数的方式

    2024年02月05日
    浏览(10)
  • 使用CryptoJS实现Vue前端加密,Java后台解密的步骤和方法

    1、crypto.js简介   CryptoJS 是一个 JavaScript 库,提供了一系列密码学函数和工具,用于加密、解密、生成摘要等任务。它支持多种加密算法,包括常见的对称加密算法(如 AES、DES)和非对称加密算法(如 RSA)。   同时,CryptoJS还包括了ECB和CBC两种模式,其中 ECB模式 :全称

    2024年02月04日
    浏览(12)
  • vue 报错:Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue

    vue 报错:Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue

    原因: 在用vscode 编写vue 代码时,因为安装的有vetur 插件,所以当代码中有v-for 语法时,会提示,“Elements in iteration expect to have ‘v-bind:key’ directives.eslint-plugin-vue” 这个错误。这是eslint 的功能,对vue 进行了eslint 检查。 解决: 第一种方法,添加 :key 属性 在v-for 指令后加上

    2024年02月05日
    浏览(15)
  • 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)

    前端结构 事件冒泡:clickSonBox事件发生时clickFatherBox事件也被触发了 此时点击子盒子 对话框弹出两次 方法1:使用js阻止事件冒泡 方法2:使用事件修饰符stop 绑定事件时,使用stop修饰符阻止事件冒泡 方法3:使用事件修饰符self 绑定事件时,使用self修饰符 表示只在本元素被点

    2024年02月16日
    浏览(17)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包