Vue高版本中一些新特性的使用详解

最新推荐文章于 2024-03-25 15:48:29 发布

霜如明月

最新推荐文章于 2024-03-25 15:48:29 发布

阅读量587

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/84632159

版权

本文详细介绍了Vue高版本中的新特性，包括深度作用选择器（>>>或/deep/）用于穿透CSS作用域，组件配置项`inheritAttrs`用于管理非声明prop，`$attrs`和`$listeners`用于组件间属性和事件的传递，`provide`和`inject`提供组件间的依赖注入，以及作用域插槽和错误捕获机制的使用。

摘要由CSDN通过智能技术生成

一、深度作用选择器（ >>> ）

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

在项目开发中，如果业务比较复杂，特别像中台或B端功能页面都不可避免的会用到第三方组件库，产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用域的CSS，父组件想要定制第三方组件的样式就比较麻烦了。

深度作用选择器( >>> 操作符)可以助你一臂之力。

<template>
<div>
  <h1 class="child-title">
    如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作
  </h1>
</div>
</template>
 
<script>
export default {
  name: 'child',
  data() {
    return {
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child-title {
  font-size: 12px;
}
</style>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

上面的child组件中 .child-title 的作用域CSS设定字体大小为12px，现在想在父组件中定制为大小20px，颜色为红色。

<template>
<div>
  <child class="parent-custom"></child>
</div>
</template>
<script>
import Child from './child';
export default {
  name: 'parent',
  components:{
    Child
  },
  data() {
    return {
    }
  }
}
</script>
 
<style>
.parent-custom >>> .child-title {
  font-size:20px;
  color: red;
}
</style>
 
效果妥妥的。但是别高兴太早，注意到上面的style使用的是纯css语法，如果采用less语法，你可能会收到一条webpack的报错信息。
 
<style lang="less">
.parent-custom {
   >>> .child-title {
    font-size:20px;
    color: red;
  }
}
</style>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-960c5412","scoped":false,"hasInlineConfig":false}!./~/postcss-loader!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/parent.vue
Module build failed: Unrecognised input
 @ /src/components/parent.vue (line 22, column 6)
 near lines:
  .parent-custom {
    >>> .child-title {
      font-size:20px;