【Vue】中 $attrs 中的使用方法

2019-02-28 19:37:51 阅读：245 来源： 互联网

标签：Vue components 组件 attrs template props msg 方法

vue官网是这样介绍的：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

<div id="app">
    A{{msg}}
    <my-button :msg="msg"></my-button>
  </div>

首先我们有三个组件A-B-C，然后想A中的属性传入C中，基本的做法是这样的，一层一层通过props往下传递

  <script>
      let vm = new Vue({
        el: '#app',
        data: {
          msg: '100'
        },
        components: {
          'MyButton': {
            props: ['msg'],
            template: `<div>B<my-input :msg="msg"></my-input></div>`,
            components: {
              'MyInput': {
                props: ['msg'],
                template: '<div>C{{msg}}</div>'
              }
            }
          },
          
        }
      })
    </script>

但是B中并没有使用到A中传递过来的属性，写props代码就是多余的了，那么$attrs可以接受上级传递过来的属性，那么我们就可以直接把$attrs传入下级

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      components: {
        'MyButton': {
          // props: ['msg'],
          template: `<div>B<my-input v-bind="$attrs"></my-input></div>`,
          components: {
            'MyInput': {
              props: ['msg'],
              template: '<div>C{{msg}}</div>'
            }
          }
        },
        
      }
    })
  </script>

注意组件别写错了，组件是在父级模板中使用的，最外层的也是模板，el表示模板挂载在哪个元素的位置

标签：Vue,components,组件,attrs,template,props,msg,方法
来源： https://www.cnblogs.com/wuxianqiang/p/10452662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Vue】中 $attrs 中的使用方法