新特性.md

深度选择器 >>>

严格来说，这个应该是 vue-loader的功能。vue-loader: ^12.2.0

父组件定制有 CSS作用域 的子组件的样式

子组件 child.vue

<!-- 模板 -->
<div class="child">我是子组件</div>

<!-- 样式，使用了 scoped 作用域 -->
<style scoped>
.child {
  color: blue;
}
<style>

父组件 parent.vue

<!-- 模板，使用子组件 child.vue -->
<div class="parent">
  <child />
<div>

<!-- 样式 -->
<!-- 通过 深度选择器 >>> 改变了子组件的字体颜色，就算是子组件使用了 css作用域也可以达到效果 -->
.parent >>> .child {
  color: red;
}

如果用的是 less，为了也使用这个特性同时避免报错，需要下面这样做

@deep: ~'>>>';
.parent {
  @{deep} .child {
    color: red;
  }
}

sass可以使用 /deep/ 操作符：

.parent {
  /deep/ .child {
    color: red;
  }
}

组件配置项 inheritAttrs (2.4.0新增)

我们都知道假如使用子组件时传了 a,b,c三个 prop，而子组件的 props选项只声明了a 和 b，那么渲染后 c将作为 html自定义属性显示在子组件的根元素上。 如果不希望这样，可以设置子组件的配置项 inheritAttrs:false，根元素就会干净多了。

export default {
  name: 'child',
  props:['a','b'],
  inheritAttrs:false
}

组件实例属性 $attrs 和 $listeners (2.4.0新增)

vm.$attrs 是组件的内置属性，值是父组件传入的所有 prop中未被组件声明的 prop(class 和 style除外)

<!-- parent.vue -->
<child a="a" b="b" c="c"></child>

<!-- child.vue -->
<script>
export default {
  name: 'child',
  props:['a','b'],
  inheritAttrs:false,
  mounted(){
    //控制台输出:
    //child:$attrs: {c: "c"}
    console.log('child:$attrs:',this.$attrs);
  }
}
</script>

组件可以通过在自己的子组件上使用 v-bind='$attrs'，进一步把值传给自己的子组件。也就是说子组件会把 $attrs的值当作传入的 prop`处理，同时还要遵守第一点的规则。

<!-- parent.vue -->
<child a="a" b="b" c="c"></child>

<!-- child.vue -->
<grand-child v-bind="$attrs" d="d"></grand-child>

<script>
export default {
  name: 'child',
  props:['a','b'],
  inheritAttrs:false
}
</script>

<!-- grandchild.vue -->
<script>
export default {
  name: 'grandchild',
  props:[],
  //props:['c'],
  inheritAttrs:false,
  mounted(){
    //控制台输出:
    //grandchild:$attrs: {d: "d", c: "c"}
    console.log('grandchild:$attrs:',this.$attrs);

    //如果props:['c']
    //控制台输出:
    //grandchild:$attrs: {d: "d"}
  },
}
</script>

vm.$listeners

只读，包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on='$listeners' 传入内部组件——在创建更高层次的组件时非常有用。

组件选项 provide/inject

类似于 React 的 context

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

Vue的错误捕获

• 全局配置errorHandler

• 生命周期钩子errorCaptured