$attr $listener

最新推荐文章于 2023-10-09 13:57:17 发布
最新推荐文章于 2023-10-09 13:57: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
    评论
专栏目录
Vue组件通信$attrs、$listeners实现原理解析
10-14
主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue组件通信-$attrs与$listeners概念与应用
weixin_71403100的博客
04-25 3862
一、$attrs与$listeners是什么$attrs与$listeners都是是属于组件实例自身的一个属性：包含了父作用域中不包含在props中的属性，这些属性可以在组件内部使用，也可以通过v-bind="$attrs"传递给子组件使用。：包含了父作用域中的(不含.sync修饰器的)v-on事件监听器，这些监听器可以在组件内部使用，也可以通过v-on="$listeners"传递给子组件使用。
Vue中组件通信-$attrs与$listeners
weixin_57677300的博客
01-31 4902
listeners与$attrs(组件通信方式的一种)他们两者都是组件实例的属性,可以获取到父组件给子组件传递的props与自定义事件。
$attrs 和 $listeners
qq_41709082的博客
10-12 5495
$attrs 和 $listeners 一、概念： $attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话 其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外） 这个属性有什么作用呢？ 当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下： // parent.vue <m-child :data-s
Vue中 $attrs、$listeners 详解及使用
热门推荐
明天也要努力的博客
04-23 4万+
1. 前言 多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。 Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props 特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和 事件总线 的情况下变得简洁，业务清晰。 首先分析以下应用场景 A 组件与 B 组件
$attr和$listener.xmind
05-29
Vue2.x $attrs和$listeners 思维导图
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....
$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...
$attrs 和 $listeners (vue2&&vue3)
最新发布
每天都要努力学习哦~~
10-09 5446
listeners。
$attr与$listeners的学习
m0_46360310的博客
08-15 1863
$ attrs和$ listeners是跨多层次组件传值的一种方式。 $attrs 用来继承上级组件的属性 不包括在当前组件里面定义的props属性，也就是说如果用了$attrs的组件里，用props接受了属性之后，该属性就不再向下传递了 $listeners 用来监听。$emit发送来的自定义事件，以及属性。 根组件 <template> <div> <fieldset> <legend>Root</legend> {{ for
$attrs和$listeners
qq_44473483的博客
10-22 2043
$attrs和$listeners 我们都知道父子组件的通信可以使用props和$emit的方式，但是如果进行父子组件和孙子组件的通讯使用props和\$emit的话就比较复杂了，需要层层传递。而，$attrs和$listeners就减少了子组件的代码。所以在我看来，它并不是一种解决通讯的方法，只是一种打通父组件和孙组件之间的阻碍，让他们可以更好的使用props和$emit的手段。 $attrs 官方介绍： 当父组件传数据给子组件的时候，如果子组件的props没有进行接收，那数据就会被收集到子组件的$at
认识一下vue中的$attrs和$listeners属性，聊聊用法
qq_43067585的博客
07-20 681
本篇文章带大家了解一下vue中封装组件利器：$attrs、$listeners属性，看看它们的用法，希望对大家有所帮助！
Vue中的$attrs和$listener的使用
青年码农
05-26 1806
点击上方“青年码农”关注回复“特效源码”可获取各种资料前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说$attrs和$listener。疫情之前，在家关了这么久，也没怎么更新，最近在看大佬的项目，学习下新的思路。之前项目上，父子组件传递数据，都是用props去接收和this.$emit触发父组件方法。这次我们用$attrs和$listener，都是在2.4.0新增。$attrs官方解释：包含了父作用域中不作为 prop 被识别 (且获取)
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3969
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue--$attrs, $listeners--使用/教程/实例
IT利刃出鞘的博客
01-08 3023
​ 说明 本文用示例介绍Vue的$attrs和$listener的用法 官网 API — Vue.js $attrs 和 $listeners介绍 Vue2.4 中，引入了attrs 和 listeners ， 新增了 inheritAttrs 选项。 $attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。 $
vue中$attr和$listener的使用方法
04-21
$attrs 和 $listeners 是 Vue 2.x 版本中常用的两个属性。 $attrs ：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值