首页 > 其他分享 >Vue2:$attrs多层传值

Vue2:$attrs多层传值

时间:2022-09-20 21:57:47浏览次数:53  
标签:一层 attrs Vue2 props 组件 官网 传值

 

在不用状态管理vuex的时候,如何让GrandFather与Son通信,我们可以用可以emit一层一层的传递:会显得冗余。

vue2.4之后,提出$attrs、$listeners ,可以实现跨级组件通信。

$listeners官网解说:事件传递

$attrs官网解说:属性传递

 

在组件中绑定 可以把当前组件的自定义属性和方法传给子元素使用:

 

$attrs中包含的数据=(父组件总的传过来的数据-子组件props接收的数据)

 $attrs的方便之处在于数据一层一层的传下去,不用每一层都用props接收之后再传给后面的组件。可以直接加一个v-bind='$attrs'就可以传下去了

语法:

v-bind='$attrs'

 

标签:一层,attrs,Vue2,props,组件,官网,传值
From: https://www.cnblogs.com/LIXI-/p/16667851.html

相关文章

  • .net 前端传值给后端有几种方法
    .net前端传值给后端有几种方法常用的一.html的标签form表单传值二.jquery的Ajax提交(可以用js里面的Ajax)$.ajax({url:"/index",//后端地址......
  • 关于vue2.x的一些问题理解
    目录1、data()方法2、数据流的双向绑定与单项绑定3、keep-alive标签4、router-view标签5、组件中方法中的this指向的是当前组件的顶级(根)元素(重要)6、this.$refs.属性名(......
  • Vue2:Vue的加载流程和IDFF
    vue加载流程1.每一个组件在加载时都会调用vue内部的render函数来把这个组件的tamplate选项的模板解析为一个JS对象这个对象跟DOM节点对象"长得一模一样",就是为了后来的......
  • Vue-多层组件传值
    在不用状态管理vuex的时候,如何让GrandFather与Son通信,我们可以用可以emit一层一层的传递:会显得冗余。vue2.4之后,提出$attrs、$listeners,可以实现跨级组件通信。$liste......
  • Vue-用$emit实现子组件向父组件传值
    上一个随笔提到属性传值是单向的,意思就是只能父组件向子组件传值,那么想要子组件向父组件传值的话就要用到$emit来触发事件   ......
  • Vue-属性传值
    属性传值所谓的属性传值,就是父组件通过绑定属性的方法,然后子组件通过props来获取父组件的值,而属性传值的方法有两种形式:第一种:具体的一个值(字符串,数值,布尔型)传......
  • Vue2:父组件传子组件-属性传值
    通过在子组件中用props["属性1","属性2","属性3"]接收父组件的值;语法:exportdefault{props:[],//接收父组件传的属性methods:{},data(){}......
  • Vue2:数据的劫持顺序
    this组件对象有很对属性和方法都是劫持的"别人"的:比如datamethodspropsthis在构建时给this设置成员的时间顺序data>props属性>方法>计算属性>事件中给this添......
  • 模板语法之传值取值
    模板语法之传值变量相关使用:{{}}逻辑语法相关:{%%}后端传值部分:defindex(request):#模版语法可以传递的后端python数据类型n=123f=11.11s......
  • vue3对比vue2获取通过refs获取组件数据
    vue21、组件设置ref标识<van-calendarref="calendarRef">2、在mounted中读取exportdefault{mounted(){//获取日历当前选择的时间constdat......