vue 透传 属性

• Vue same::

  Vue 处理组件多余的属性

  说明:

  注意卡多余属性指的是:<div fuck="lala"></div> 而不是: <div :fuck="lala"></div>

  实例:

  1. 关闭自动继承属性

  createApp({
      components: {
          test: {
              inheritAttrs: false,//关闭自动继承
              template: `
                  <div>
                      <h1 v-bind="$attrs">hhhh</h1>
                  </div>
              `,//所有传入的多余属性都会以键值对的形式保存在$attrs对象中
          }
      }
  }).mount('#app');

  <div id="app">
  	<test fuck="Lala" shit="haha"></test>
  </div>

  最终渲染成

  <div id="app">
  	<div>
  		<h1 fuck="Lala" shit="haha">hhhh</h1>
  	</div>
  </div>

  2. 开启自动继承属性:

  createApp({
      components: {
          test: {
              template: `
                  <div>
                      <h1 v-bind="$attrs">hhhh</h1>
                  </div>
              `,
          }
      }
  }).mount('#app');

  <div id="app">
  	<test fuck="Lala" shit="haha"></test>
  </div>

  最终渲染成:

  <div id="app">
  	<div fuck="Lala" shit="haha">
  		<h1 fuck="Lala" shit="haha">hhhh</h1>
  	</div>
  </div>

  2.1. 说明:

  1. 自动继承会自动把这些多余属性都添加到组件模板中的最顶级标签
     1. 如果有多个最顶级标签, 且没有手动指定多余属性的去处, 则会弹出警告, 但不报错

  指向原始笔记的链接