vue精粹(一)

沉寂了一年，没有更新文章了，今天抽点时间分享一下vue的知识。

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个传递到子组件的属性,下面看看子组件。

  // childComment.vue
<template>
  <div>{{ foo }}<div>
</template>

<script>
export default {
  props: ['foo']
}
</script>

我们看到子组件只是在props中添加了foo属性，那么父组件的boo的属性呢？
最后子组件会渲染为:

<div boo="Hello Vue!">Hello world!</div>

可以看到boo作为dom属性传递到了子组件。如果我么不想让这个传递呢？

<script>
export default {
  props: ['foo'],
  inheritAttrs: false
}
</script>
// 设置 interitAttrs 为 false，之后，不会应用到跟元素上。

渲染为<div>Hello world!</div>

2.$attrs用法

设想一下我们通过父组件传值，总需要在子组件的props中显示声明，显然麻烦，这时候就需要用$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>

相信看到这里大家应该懂了, $attrs出现的用途了，有了这个我们再也不用去在props里面添加属性了。