v-bind=“$attrs“多层组件传值 按需引入数据 同时附带v-modal绑定值接收

最新推荐文章于 2024-04-18 09:06:22 发布
最新推荐文章于 2024-04-18 09:06:22 发布
阅读量1.3k 收藏
点赞数
文章标签： 前端 vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44132285/article/details/124770947
版权

首先描述一下使用场景
现在我们有四个组件A、B、C ，D属于嵌套关系A嵌套B，B组件嵌套C，C嵌套D
A传了三组数据要分别在B、C.D中使用

这里的
这里的三个参数分别是（name,value,grandparents）

这里普及一下v-model绑定的参数是直接可以再子组件通过props中的value属性接收使用的；代码如下
在这里插入图片描述
如果C页面要用到A页面传递过来的name属性这时候我们就要用到v-bind=“ a t t r s " 给 C 组 件 绑 定 （ v − b i n d = " attrs"给C组件绑定（v-bind=" attrs"给C组件绑定（v−bind="attrs”）

然后就可以直接在C组件中通过props接收到代码如下：
在这里插入图片描述
在这里插入图片描述
如果此时D组件要用到A组件的grandparents这个属性 需要在D组件上也绑定v-bind="$attrs"属性，代码如下；在这里插入图片描述在这里插入图片描述
依次绑定可以无限循环嵌套使用A组件要传的值而且可以做到按需导入A组件我想要的值

愤怒的小郭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue里面v-bind和Props 利用props绑定动态数据的方法
12-29
如下所示： <add v-bind:子组件的值=父组件的属性></add> <div id=app> <add v-bind:btn=h></add> </div> [removed] var vm = new Vue({ el: '#app', data: { h: hello }, components: { add: { props: ['btn'], template: <button>btn：{{btn}}</button>, data: fun
一文读懂vue动态属性数据绑定（v-bind指令）
10-15
在 Vue 中，`v-bind` 用于动态地将数据模型绑定到元素的属性。`:` 符号是 `v-bind` 的简写，使得代码更简洁。例如，如果你有一个数据属性 `href`，你可以这样绑定到 `<a>` 标签的 `href` 属性： ```html <a v-bind:...
vue3 v-bind=“$attrs“ 继承组件全部属性
jieyucx的博客
01-02 4289
vue3 v-bind="$attrs" 继承组件全部属性
v-bind=“$attrs“和v-on=“$listeners“的用法
最新发布
weixin_46504400的博客
04-18 478
v-bind=“$attrs”：这个指令的作用是将父组件传递给子组件的所有属性绑定到子组件的根元素上。这样做的好处是，即使子组件没有显式声明这些属性，它们仍然可以访问到这些属性。v-on=“$listeners”：这个指令的作用是将父组件传递给子组件的事件监听器绑定到子组件的根元素上。通常，我们在编写组件时，会希望组件的API能够更加灵活，以便适应不同的使用场景。通过这种方式，我们可以让子组件接收到父组件传递的任何属性和事件，从而增强了组件的通用性和灵活性。子组件直接this.
理解 v-model、v-bind、$attrs、 $listener 和 .sync 及其在跨组件数据双向绑定上的应用
landiyaaa的博客
01-14 6213
目标和内容： 在完全理解 v-model，$attrs, $listener 的基础上，实现父(A)、子(B)、后代(C)的三层组件结构中，A组件和C组件跨越B组件之间的数据双向绑定。 一、v-model 的本质 <MyList v-model="lovingVue"></MyList> <!-- 其实是以下的语法糖 --> <MyList ...
vue自定义组件使用$attrs和$listeners，正确传递属性和v-model的值
weixin_42471170的博客
07-11 769
/* @Description: @Author: hyh @Date: 2021-07-11 18:46:00 @LastEditTime: 2021-07-11 18:46:00 @LastEditors: hyh */ export default { inheritAttrs: true, props: { value: String }, data() { return { list: [] } }, methods: {}, computed: {}, watch:
Vue之插值表达式，v-bind（单向绑定），v-model（双向绑定）
浩泽学编程的博客
05-23 1799
插值表达式{{…}}v-bindv-model以上就是关于插值表达式、v-bind、v-model的讲解。
Vue中v-bind=“$attrs”的使用方法
KevinWayneDurant的博客
10-11 959
主要用于组件之间的隔代传值。例如有 父组件A，子组件B，孙组件C 三个组件。 在A组件中传值给C，可直接在B中的C上设置v-bind="$attrs"，然后在C组件中用prop接收，此时就直接把值传给了C。
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
详解vue中v-model和v-bind绑定数据的异同
10-14
总结起来，`v-bind` 和 `v-model` 在Vue中分别代表单向数据绑定和双向数据绑定，它们都用于建立组件和数据之间的桥梁。`v-bind` 更适合于静态属性的设置和更新，而 `v-model` 则适用于表单元素的交互，提供便捷的...
vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听
weixin_43550562的博客
09-28 466
废话不多说，直接上代码 爷爷组件 <template> <section> <centers name="name" age="18" gender="666" sdf="asd" @isClick="isClick" @asd="asd" > </centers> </section> </template> <script&
对Vue- 动态元素属性及v-bind和v-model的区别详解
12-29
Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令： <div v-bind:id=dynamicId></div> 这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除： <button v-bind:disabled=someDynamicCondition>Button</button> 从一开始学习的时候我们就知道v-bind是可以绑定属性和数据的，而v-model也一样可以绑定数据，那么v-bind和v-model的区别在哪里？ 1：如果 id={{xxx}}这种写法，则HTML实际上是这样的：id=”{{
vue中使用v-bind=“$attrs“多层组件传值
我总是词不达意的博客
06-21 4013
vue中使用v-bind=“$attrs“多层组件传值
vue中使用v-bind=“$attrs“进行多层组件的传值&v-on=“$listener“监听事件（父级事件传递到内部组件）
是大林的林吖-博客
11-26 3715
使用v-bind="$attrs"进行多层组件的传值(即继承) 1、最外层组件（祖父）grandfather.vue <template> <div class="grandfather"> <father :title="title"/> </div> </template> <script> export default { data() { return{ title: 'hello worl
Input组件封装的v-model问题
front_endxiaobaia的博客
05-31 2187
一、关于组件的封装： v-bind="$attrs"与v-on="$listener"是组件封装或二次封装过程中经常使用的指令，q
Vue中 v-bind、v-model、以及父给子传值
weixin_43377049的博客
09-06 3172
Vue中 v-bind、v-model、以及父给子传值
Vue-- $attrs与$listeners的详解
时清云的博客
06-26 3660
1、vm.$attrs 2.4.0新增 类型 { [key: string]: string } 只读 详细 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 styl
v-bind=$attrs
07-27
v-bind=$attrs 是 Vue.js 中的一个特殊指令，用于将父组件的属性绑定到子组件上。 在 Vue 组件中，子组件可以通过 props 属性接收父组件传递的数据。但是，如果父组件上有许多属性需要传递给子组件，手动一个一个地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值