$attr $listener

最新推荐文章于 2024-05-24 09:50:17 发布
最新推荐文章于 2024-05-24 09:50:17 发布
阅读量576 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newway007/article/details/103756378
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{value}}
        <wrapper v-on:focus="onFocus" v-bind:value="value" v-on:input="onFocus" placeholder="请输入"> </wrapper>
    </div>


    <script>
        Vue.component("Wrapper", {

            template: `

 <div>

     <son v-bind="$attrs" v-on="$listeners"></son>

 </div>

`

        });

        Vue.component("son", {
            template: `    
                    <div>        
                    <button @click="handleClick">333</button>         
                    <input type="text" v-bind="$attrs" v-on="rewriteListener">   
                     </div>   `,

            computed: {
                rewriteListener() {
                    const vm = this;
                    return Object.assign({}, this.$listeners, {
                        input: function (event) {
                            vm.$emit("input", event.target.value)
                        }
                    })
                }
            },
            methods:{
                handleClick(){
                    console.log('handleClick')
                }
            }

        })
        new Vue({
            el:'#app',
            data:{
              value:''
            },
            methods:{
                onFocus(value){
                    console.log(value)
                }
            }
        })

 

newway007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$attr与$listeners的学习
m0_46360310的博客
08-15 1865
$ attrs和$ listeners是跨多层次组件传值的一种方式。 $attrs 用来继承上级组件的属性 不包括在当前组件里面定义的props属性，也就是说如果用了$attrs的组件里，用props接受了属性之后，该属性就不再向下传递了 $listeners 用来监听。$emit发送来的自定义事件，以及属性。 根组件 <template> <div> <fieldset> <legend>Root</legend> {{ for
$attr和$listener.xmind
05-29
Vue2.x $attrs和$listeners 思维导图
$attrs 和 $listeners
qq_41709082的博客
10-12 5506
$attrs 和 $listeners 一、概念： $attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话 其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外） 这个属性有什么作用呢？ 当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下： // parent.vue <m-child :data-s
$attrs和$listeners的应用
weixin_42274805的博客
09-22 1855
引言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果为了传递数据而无中间层处理，则可以使用Vue中提供的$attrs和$listeners 父子AB组件通讯 A to B 通过props的方式向子组件传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现 /** 组件A */ <template> <compoentB @data-add="handleA...
Vue2中的$attrs和$listener和provide和inject
最新发布
qq_41632427的博客
05-24 407
.前言爷组件<template> <div class="page-all"> 爷爷组件 <B :msg1="msg1" :msg2="msg2" @method1="handleClick" @method2="handleClick"></B> </div> </template> &l...
vue的$parent $refs 和 $attrs $listener
h666000的博客
12-02 463
vue的$parent $refs 和 $attrs $listener $parent ：获取父对象的实例 $refs：获取子组件的数据以及方法 $attrs：获取父组件的传的数据 prop接收 $listener：获取父组件的事件监听器
$attrs $listener .native
weixin_50736511的博客
03-01 94
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过。包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建更高层次的组件时非常有用。说白了$attrs就是能获取父组件除了props传入的所有的属性（除了class和style属性）传入内部组件——在创建高级别的组件时非常有用。.native - 监听组件根元素的原生事件。包含了父作用域中不作为。
Vue中组件通信-$attrs与$listeners
J20020212的博客
01-11 963
这个时候我们想给按钮绑定一个点击事件,点击弹出一个999什么的,我们知道HintButton是一个组件,在组件身上写@click他就变成了自定义事件了。这回我们子组件接收父组件传递过来的参数,我们就不用props了,我们利用组件实例身上的一个属性$attrs也可以接收父组件传递给子组件的数据。注意：要是我们用props接受的话，父组件给的数据子组件通过props接收的属性,在$attrs属性当中是获取不到的。在element UI的button按钮上二次封装给他加上一个hover提示的按钮，
$attrs和$listeners
風缘的博客
09-05 9477
$attrs与$listeners的主要应用是实现多层嵌套传递。 组件A与组件B通信一般都会使用组件B中转，即A传递给B，B再给C，但是如果A到C组件之间嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。在vue2.4中，为了解决该需求，引入了$attrs和$listeners，新增了inheritAttrs选项。 $attrs的使用 官方定义： 包含了父作用域中不作为pr...
vue中的$attrs和$listener以及$props简介
很多时候犯错都是在不知情的情况下发生的
08-15 804
Vue中的$attrs和$listener 大家在组件开发中肯定遇到过父组件需要向子组件传递数据和事件的问题，以往我们是这样解决的： 父组件代码： 1 <template> 2 <div id="father"> 3 <child :tempdata="temp" @fatherFn="tempFn"><child> 4 </div> 5 </template> 6 <scr
Vue组件通信$attrs、$listeners实现原理解析
10-14
Vue.js 是一款流行的前端框架，它的组件化设计是其强大之处。在开发过程中，组件间的通信是必不可少的，Vue 提供了多种通信机制，如 props、事件 emit、Vuex、Event Bus 以及 provide/inject 等。...
Android自定义图片轮播Banner控件使用解析
01-20
this.listener = listener; } ``` 在布局文件中，我们可以这样使用自定义的`BannerView`： ```xml android:id="@+id/bannerView" android:layout_width="wrap_content" android:layout_height="wrap_content...
Android 自定义view模板并实现点击事件的回调
08-31
<attr name="titleSize" format="dimension"></attr> <!-- ... 其他属性 --> ``` 接下来，我们创建自定义View类`TopBar`，继承自`RelativeLayout`。在这个类中，我们需要初始化并获取attrs.xml中定义的属性，...
android开发标题统一管理
04-07
this.listener = listener; } // 在需要响应点击的地方调用 if (listener != null) { leftButton.setOnClickListener(v -> listener.onLeftButtonClick()); rightButton.setOnClickListener(v -> listener....
element-ui中动态修改组件属性的值
newway007的博客
12-31 9511
最近在联系router中的history，顺便熟悉一下element ui， 针对动态修改属性的值，做一下笔记。 想要点击更换button的type类型。 最初的想法是使用ref获取该dom： <el-button ref="button11" size="mini" @click="choose_card1">a</el-button> <el-butto...
vuex4的使用
newway007的博客
12-23 2262
import{createStore}from'vuex' exportdefaultcreateStore({ state:{ count:0 }, getters:{ doubleCount:state=>state.count*2 }, mutations:{ addCount(state,payload=1){ state.count+=payload; } }, act...
vue3源码之diff以及最长递增子序列详解（多种方法）
newway007的博客
04-21 1647
终于来到了我最想写的diff了。当时看这一块代码看了好久。然后顺带get了最长上升子序列算法和vue3源码中做的优化。 新子节点数组相对于旧子节点数组的变化, 无非是通过更新, 删除, 添加和移动节点来完成的. 新旧子节点数组很容易拥有相同的头尾节点. 对于相同的节点, 我们只需要对比更新即可. 1.同步头部节点 const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSus..
vue3源码阅读-createApp
newway007的博客
03-28 1522
CreateApp 作为 vue 的启动函数，返回一个应用实例 一个实例： const HelloVueApp = { data() { return { message: 'Hello Vue!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue') export const createApp = ((...args) => { const app = ensureRenderer()..
vue中$attr和$listener的使用方法
04-21
$attrs 和 $listeners 是 Vue 2.x 版本中常用的两个属性。 $attrs ：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $listeners ： 包含了父作用域中绑定的 (不含 .native 修饰器的) 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 示例代码如下： <template> <div> <child-component v-bind="$attrs" v-on="$listeners"></child-component> </div> </template> 在这个例子中，我们通过 v-bind="$attrs" 将 $attrs 传入子组件，这样子组件就能得到父组件的所有特性绑定。通过 v-on="$listeners" 将 $listeners 传入子组件，子组件就能获取到父组件的所有事件监听器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值