vue $attrs $listeners 实现组件传值

比如我们有个组件需要直接在父组件上设置子组件的属性比如下面：

// html

      
{{message}}
      

        
      
      

        
      
   
//js
    Vue.component("my-input", {
        data: function () {
          return {
            count: 0,
          };
        },
        template: `
        

          请输入
          
        
        `,
      });

      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
        },
      });

image.png

可以看到type和placeholder并没有添加到我们需要打input上。这个时候我们就需要用到$attrs 和 inheritAttrs

• inheritAttrs:默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
  就是说我们只要添加 inheritAttrs： false。那么div上就不会出现type和placeholder了

• $attrs: 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。

我们可以到input上绑定$attrs获取到type和placeholder

image.png

然后我们来试试给props传递一个参数。

//html
    

      
{{message}}
      

        
      
      

        
      
    
//js
    

image.png

可以看到 $attrs 中prop 不能被识别

继续子组件调用父组件的方法

• listeners" 传入内部组件

首先要确保用v-on传递

//html
    

      
{{message}}
      

        
      
      

        
      
    
// js
    

image.png

我们可以看到 由于我们给type="text"的组件绑定了父组件的方法@listener1="fn1"
所有控制台只打印了fn1,
然后我们点击label，执行父组件的方法，改变value的值;

image.png

成功把input框中的内容改变。

当然还有其他的传值方法，比如： props/$emit, 子组件向父组件传值（通过事件形式）, $emit/$on,vuex,provide/inject,$parent / $children与 ref 网上很多也就不记录了

传送门：https://segmentfault.com/a/1190000019208626