---

theme: hydrogen

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

1.style 上加 scoped 属性的原理吗？

1）什么是 scoped

在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在

style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果

一个项目中的所有 Vue 组件 style 标签全部加上了 scoped，相当于实现了样式

的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样

式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透

scoped 的方式来解决，选择器

2）scoped 的实现原理：

Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现，如下是转译前的

Vue 代码：

.scoped {font-size:14px;}

浏 览 器 渲 染 后 的 代 码 ：

.scoped[data-v-fed36922]{font-size:14px;}

即：PostCSS 给所有 dom 添加了一个唯一不重复的动态属性，然后，给 CSS 选择

器额外添加一个对应的属性选择器来选择该组件中 dom，这种做法使得样式私有

化

2.路由传值的方式有哪几种

Vue-Router 传参可以分为两大类，分别是编程式的导航 router.push 和声明式

的导航

1）router.push

字符串：直接传递路由地址，但是不能传递参数

this.$router.push("home")

对象：

命名路由 这种方式传递参数，目标页面刷新会报错

this.$router.push({name:"

news",params:{userId:123})

查询参数 和 name 配对的式 params，和 path 配对的是

query

this.$router.push({path:"

/news',query:{uersId:123})

接收参数 this.$route.query

2）声明式导航

字符串 <router-link to:"news">

命名路由

<router

link :to:"{name:'news',params:{userid:1111}}">

查 询 参 数

<router

link :to="{path:'/news',query:{userId:1111}}">