沉寂了一年，沒有更新文章了，今天抽點(diǎn)時(shí)間分享一下vue的知識(shí)。
1.interitAttrs用法
// parent.vue
<template>
<child-commpent :foo="f" :boo="b"></child-comment>
</template>
const childComment = () => import('./childCom.vue')
export default {
data () {
return {
f: 'Hello world!'
b: 'Hello Vue!'
}
}
}
以上父組件中定義了2個(gè)傳遞到子組件的屬性,下面看看子組件。
// childComment.vue
<template>
<div>{{ foo }}<div>
</template>
<script>
export default {
props: ['foo']
}
</script>
我們看到子組件只是在props中添加了foo屬性秘豹，那么父組件的boo的屬性呢？
最后子組件會(huì)渲染為:
<div boo="Hello Vue!">Hello world!</div>
可以看到boo作為dom屬性傳遞到了子組件昌粤。如果我么不想讓這個(gè)傳遞呢既绕？
<script>
export default {
props: ['foo'],
inheritAttrs: false
}
</script>
// 設(shè)置 interitAttrs 為 false，之后涮坐，不會(huì)應(yīng)用到跟元素上凄贩。
渲染為<div>Hello world!</div>
2.$attrs用法
設(shè)想一下我們通過父組件傳值，總需要在子組件的props中顯示聲明膊升，顯然麻煩怎炊，這時(shí)候就需要用$attrs.
父組件
// demo.vue
<template>
<div>
<child-com :foo="foo" :boo="boo" :coo="coo" :doo="doo"></child-com>
</div>
</tempalte>
<script>
const childCom = () => import('./childCom1.vue')
export default {
data () {
return {
foo: 'Hello World!',
boo: 'Hello Javascript!',
coo: 'Hello Vue',
doo: 'Last'
}
},
components: { childCom }
}
</script>
子組件
// childCom1.vue
<template>
<div>
<p>foo: {{ foo }}</p>
<p>attrs: {{ $attrs }}</p>
</div>
</template>
<script>
export default {
props: ['foo'],
inheritAttrs: false,
created () {
console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
}
}
</script>
相信看到這里大家應(yīng)該懂了, $attrs出現(xiàn)的用途了，有了這個(gè)我們?cè)僖膊挥萌ピ趐rops里面添加屬性了廓译。
