一、深度动作选择器()

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

在项目开发中，如果业务比较复杂，尤其是第三方组件库，必然会用到中间或者B端功能页面，产品有时候也要在UI中定制这些组件。如果这些组件采用带范围的CSS，那么父组件定制第三方组件的样式就比较麻烦。

深度动作选择器(操作员)可以帮助您。

template div h1 class=' child-title '如果希望作用域样式中的选择器发挥“更深”的作用，例如影响子组件，可以使用operation/h1/div/templatescriptordefault { name : ' child '，data(){ return } } }/script！-添加“scoped”属性以将CSS限制为此组件-仅限样式-scoped . child-title { font-size : 12px；}/范围内的CSS。上面的子组件中的子标题}/style将字体大小设置为12px，现在我想在红色的父组件中将其自定义为20px。

template div Child class=' parent-custom '/Child/div/template script import Child from '。/child '；导出默认的{ name: 'parent '，components: { Child }，data(){ return } }/script style . parent-custom。子标题{ font-size :20 px；颜色：红色；}/style有效。但是不要太高兴。请注意，上面的样式使用纯css语法。如果使用较少的语法，您可能会从webpack收到一条错误消息。style lang='less '。父-自定义{。子标题{ font-size :20 px；颜色：红色；}}/styleERROR in。/~/css-loader！/~/vue-loader/lib/style-编译器？{'vue':true，' id':'data-v-960c5412 '，' scoped':false，' hasInlineConfig':false}！/~/postss-loader！/~/less-loader！/~/vue-loader/lib/selector.js？type=stylesindex=0！/src/components/parent . vuemodule构建失败：行：附近的未识别输入@ /src/components/parent.vue(第22行，第6列)。父-自定义{。子标题{ font-size :20 px；上面的错误信息实际上是less的语法未知。(有人在github的问题上较少提出支持运营商，但本文使用的v2.7.3会有这个问题。)

解决办法是使用较少的浮动和可变插值

style lang=' less ' @ deep: ~。父-自定义{ @{deep}。子标题{ font-size :20 px；颜色：红色；}}/style对于其他css预处理程序，因为不是很好用，所以不要乱评论，复制文档。

像Sass这样的预处理程序无法正确解析。在这种情况下，您可以使用/deep/运算符来代替——，这是一个新的别名，它也可以正常工作。

二.组件配置项继承属性、组件实例属性和侦听器

添加了2.4.0

组件配置项继承

众所周知，如果在使用子组件时传递了A、B、C三个道具，而子组件的props选项只声明了A和B，那么C在渲染后会作为html自定义属性显示在子组件的根元素上。

如果您不想这样，您可以将子组件的配置项inheritAttrs:false设置为false，根元素会更干净。

script export default { name : ' child '，prop 3360[' a '，' b']，inheritattrs: false}/script组件实例属性$attrs和$listeners

让我们看看虚拟机。$attrs文件显示

虚拟机。$attrs

类型：{[key: string]: string}

只读

它包含的属性绑定(除了类和样式)在父范围内不被识别(和获取)。当一个组件没有声明任何prop时，它将包含父范围的所有绑定(除了类和样式)，并且可以通过v-bind=$ attrs传递到内部组件——中，这在创建高级组件时非常有用。

总而言之，有两点：

Vm。$attrs是组件的内置属性，它的值是父组件传入的所有道具中组件没有声明的道具(类和样式除外)。

或者以前面的子组件为例

//parent . vuetemplate div child class=' parent-custom ' a=' a ' b=' b ' c=' c '/child/div/template//child . vuescriptorexport default { name : ' child '，props 3360[' a '，' b']，inherit attrs: false，mounted(){//控制台输出：//child : $ attrs 3: { c 3: ' c ' } console . log(' child 33: $也就是说，子组件将把$attrs的值视为传入的道具，同时它必须遵守第一条规则。

//parent . vuetemplate div child a=' a ' b=' b ' c=' c '/child/div/template//child . vuetemplate div grand-child v-bind=' $ attrs ' d=' d '/grand-child/div/template scriptexport default { name : ' child '，props:['a '，' b']，inheritattrs : false }/script//孙子. vuescripexport default { name : '孙子'，prop 3360[，]$ attrs//if prop :[' c ']//控制台输出：//grand child : $ attrs : { d : ' d ' } }，}/scriptvm。$ listeners

类型：{[key : string]: function | array }

只读

在父作用域中包含v-on事件侦听器(没有。原生修饰语)。它可以通过v-on=$ listeners传递到内部组件——中，这在创建更高级别的组件时非常有用。

综上所述，也有两点：

1.虚拟机。$listeners是组件的内置属性，其值是父组件的v-on事件侦听器(没有。原生修饰语)。2.组件可以通过在自己的子组件上使用v-on=$ listeners进一步将值传递给自己的子组件。如果子组件已经绑定到$listener中同名的侦听器，那么这两个侦听器函数将以冒泡的方式一个接一个地执行。

//parent . vuetemplate div Child @ update=' onparent update '/Child/div/template export default { name : ' parent '，components:{ Child }，methods : { onparent update(){ console . log(' parent . vue 3360 onparent update ')} }/script//Child . vuetemplate div grand-Child @ update=' onChildUpdate ' v-on=' $ listeners '/grand-Child/div/template export default { name : ' Child '$ listeners)；//控制台输出：//child . vue : on child update//parent . vue : on parent更新此。$ listeners . update()；} }/脚本三。组件选项提供/注入

添加了2.2.0

如果我们列出Vue组件之间的通信方法，我们通常会说prop、自定义事件、事件总线和Vuex。提供/注入提供了另一种方法。

这一对选项需要一起使用，以允许祖先组件向其所有后代注入依赖关系，无论组件层次结构有多深，并且它总是在建立上下游关系时生效。

如果你熟悉React，它类似于React的上下文。

但是，应该注意的是，文档中不建议直接应用。

提供和注入主要提供高级插件/组件库的用例。不建议在应用程序代码中直接使用。

//parent . vuetemplate div Child/Child/div/templatescript export default { name : ' parent '，provide : { data : ' I parent . vue ' }，components 3360 { Child } }/script//Child . vuetemplate div grand-Child/grand-Child/div/templatescript export default { name 3: ' Child '，components 3360 { Sunderse } }/script//. vuescript export default { name 3: ' Sunderse '，inject}}/scriptprovide选项应该是一个返回对象的对象或函数。该对象包含可以注入其后代的属性。inject选项应该是一个字符串数组或对象，其键表示本地绑定的名称，而该值是要在提供中采用的键。

在2.5.0中，当inject选项是对象时，还可以指定from来表示源属性，default指定默认值(如果是非原始值，则使用factory方法)。

const child={ inject : { foo : { from : ' bar '，default 3360 ' foo '/default :()=[1，2，3]}}} IV。范围插槽插槽-范围

添加了2.1.0

在2.5.0中，插槽范围不再局限于模板元素，而是可以用于插槽中的任何元素或组件。

范围槽有很好的记录。下面是一个展示应用场景的例子。

可以看出，列表页面和编辑页面的数据显示是一样的，唯一的区别是不同页面对数据的处理逻辑不同。同一个数据显示片可以提取到一个组件中，不同的地方可以借助范围槽来实现。

//data-show . vuetemplatediv ul Li v-for='列表中的项目' span { { item . title } }/span slot v-bind : item='项目'/slot/Li/ul/div/Template//list.vuetemplatep/p数据的列表页-show: list='列表'模板slot-作用域='插槽道具' span v-if='插槽道具. item.complete '/span v-elsex/span/Template/data-show/Template//编辑. vuetemplatep编辑页/p

全局配置错误处理程序

从2.2.0开始，这个钩子还将捕获组件生命周期钩子中的错误。从2.4.0开始，这个钩子还将捕获Vue自定义事件处理程序中的错误。

有关更详细的描述，您可以查看文档errorHandler

生命周期挂钩错误已捕获

添加了2.5.0

有关更详细的描述，您可以查看文档错误捕获

如果你熟悉React，你会发现它类似于错误边界的概念，实际上就是这样使用的。

文档错误处理中给出了一个典型的例子

Vue.component('ErrorBoundary '，{ data: ()=({ error: null })，errorCaptured (err，vm，info){ this . error=` $ { err . stack } n n在组件的${info}中找到` return false '，{ render(h){ if(this . error){ return h(' pre '，{ style: { color: 'red' }，this.error) } //为演示起见忽略边缘情况返回此。$slots.default[0] }})错误边界另一个组件//Error-boundary需要强调的是，errorCaptured无法捕获自身的错误和异步错误(如网络请求和鼠标事件导致的错误)。

在2.5中，我们引入了新的错误捕获钩子。带有此钩子的组件从其子组件树(不包括自身)中捕获所有错误(不包括异步回调中触发的错误)。

参考

https://github.com/vuejs/vue/releases

https://github.com/vuejs/vue-loader/releases

摘要

以上是边肖介绍的高版本Fuvue中一些新功能的使用，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！