vue 在组件自定义标签上赋属性inheritAttrs和$attrs

灰太狼 2021-07-24 17:43 387阅读 0赞

单个根节点的组件:
    
    	默认的传递给组件的未在props中注册的属性和未在emits中注册的函数,会赋值在组件的根元素上
    		注册:
    		export default {
    			props:[...],
    			emits:[...]
    		}
    	
    	赋值在组件自定义标签上:
    	
    		适用于有些将组件上的监听器移动到具体某个标签上的场景
    		
    		(1)组件的选项中设置 inheritAttrs: false
    			export default {
    			  inheritAttrs:false,
    			}
    		
    		(2)使用$attrs,在自定义标签上使用
    			<template>
    			    <label>
    			      <input
    			        v-bind="$attrs"
    			      >
    			    </label>
    			</template>
    		
    多个根节点的组件不具有自动attribute回退行为,需手动设置$attrs
    	
    	app.component('custom-layout', {	这将发出警告
    	  template: `
    	    <header>...</header>
    	    <main>...</main>
    	    <footer>...</footer>
    	  `
    	})
    	
    	app.component('custom-layout', {
    	  template: `
    	    <header>...</header>
    	    <main v-bind="$attrs">...</main>	$attrs被传递到<main>元素
    	    <footer>...</footer>
    	  `
    	})

代码示例:  
效果图:  
![在这里插入图片描述][20210317110311488.png]

父元素:

new Vue({ 
      el: '#app',
      router,
      data: { 
        name: { 
          required: true,
          placeholder: 'Enter your username'
        }
      },
      components: {  App },
      template: '<App :name="name" />'
    })

子元素:

<template>
        <label>
          
          <input
            v-bind="$attrs"
            v-on:input="$emit('input', $event.target.value)"
          >
        </label>
    </template>
    
    <script>
    export default { 
      inheritAttrs:false,
      name: 'App',
      data(){ 
        return{ 
    
        }
      },
      methods:{ 
    
      },
      computed:{ 
    
      },
      watch:{ 
    
      },
      mounted(){ 
        console.log(this.name)
        console.log(this.$attrs);
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

[20210317110311488.png]: /images/20210724/5c5852037da7471ea3a03eb76d867cc2.png