我始终对v-bind=“$attrs”和v-bind=“$props” 两个属性分不清楚，明天学习并总结了一下。
官网定义:
蕴含了父作用域中不作为 prop 被辨认 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v-bind=”$attrs” 传入外部组件——在创立高级别的组件时十分有用。
在网上看了前辈的解释:
当子组件没有申明或者说没有接管父组件传下来的prop属性时，那么父组件传下来的prop属性会被保留在子组件的vm.$attrs属性上。
这里指的父组件的意思是比拟宽泛的，是能够跨层级的父组件；如果子组件是下例的grandson组件，那么father组件和son组件均是它的父组件。
代码截图：
我在父组件中应用v-bind写了三个属性，在子组件中有一个props1是作为props接管的，其它两个没写在props外面阐明就是放在了$attrs属性上，在created外面打印this.$attrs，失去{attrs1: 1234567,attrs2: “接管父组件里的数据”}。
我一共写了三个组件：父组件，子组件，孙子组件。在子组件中写入v-bind=”$attrs”，则孙子组件也能够接管父组件的子组件attrs属性了。
如果孙子组件须要同时接管$attrs, $props，则在子组件写入v-bind=”[$attrs, $props]”即可。
上面是残缺的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<h3>父组件</h3>
<child v-bind:attrs2="attrs2" v-bind:attrs1="1234567" v-bind:props1="`我是props1`"></child>
</div>
<script src="http://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
// 孙子组件-----------------------------------------------------------------------------------------------
Vue.component('grandchild', {
template:
`
<div>
<h3>孙子组件</h3>
attrs接管：{{$attrs.attrs1}}
<br/>
attrs接管：{{$attrs.attrs2}}
<br/>
props接管：{{props1}}
</div>
`,
name: 'grandchild',
inheritattrs: false,
props: {
props1: String
},
created() {
console.log(this.$attrs, '$attrs')
},
})
// 子组件-----------------------------------------------------------------------------------------------
Vue.component('child', {
template:
`
<div>
<h3>子组件</h3>
attrs接管：{{$attrs.attrs1}}
<br/>
attrs接管：{{$attrs.attrs2}}
<br/>
props接管：{{props1}}
<grandchild v-on="$listeners" v-bind="[$attrs, $props]"></grandchild>
</div>
`,
name: 'child',
inheritattrs: false,
props: {
props1: String
},
})
// 父组件-----------------------------------------------------------------------------------------------
new Vue({
name: 'parent',
// inheritattrs: false,
el: '#app',
data() {
return {
attrs2: '接管父组件里数据'
}
},
})
</script>
</body>
</html>
发表回复