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

单个根节点的组件:

	默认的传递给组件的未在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>
	  `
	})

代码示例:
效果图:

父元素:

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>