Vue中Scoped原理

Vue中Scoped原理

Vue的作用域样式 Scoped CSS 的实现思路如下：

1. 为每个组件实例生成一个能唯一标识组件实例的标识符，记作 InstanceID；
2. 给组件模板中的每一个标签对应的 Dom 元素添加一个标签属性，格式为 data-v-实例标识（示例：< div

data-v-e0f690c0=“” >）；

1. 给组件的作用域样式 < style scoped> 的每一个选择器的最后一个选择器单元增加一个属性选择器

特点

1、将组件的样式的作用范围限制在了组件自身的标签

即：组件内部，包含子组件的根标签，但不包含子组件的除根标签之外的其它标签；所以组件的 css 选择器也不能选择到子组件及后代组件的中的元素（子组件的根元素除外）；

因为它给选择器的最后一个选择器单元增加了属性选择器 [data-v-实例标识]，而该属性选择器只能选中当前组件模板中的标签；而对于子组件，只有根元素即有能代表子组件的标签属性 data-v-子实例标识，又有能

代表当前组件（父组件）的签属性 data-v-父实例标识，子组件的其它非根元素，仅有能代表子组件的标签属性 data-v-子实例标识；

2、如果递归组件有后代选择器，则该选择器会打破特性1中所说的子组件限制，从而选中递归子组件的中元素；

原因：假设递归组件A的作用域样式中有选择器有后代选择器 div p，则在每次递归中都会为本次递归创建新的组件实例，同时也会为该实例生成对应的选择器 div p[data-v-当前递归组件实例的实例标识]，对于递归组

件的除了第一个递归实例之外的所有递归实例来说，虽然 div p[data-v-当前递归组件实例的实例标识] 不会选中子组件实例（递归子组件的实例）中的 p 元素（具体原因已在特性1中讲解），但是它会选中当前组件

实例中所有的 p 元素，因为父组件实例（递归父组件的实例）中有匹配的 div 元素；

Vue中的ref

ref

常用来辅助开发者，获取 DOM 元素或组件的引用，以及用于在父子组件中获取对方的某个元素进行取值，调用方法等。

在每个 Vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用

默认情况下，组件的 $refs 指向一个空对象如果想要使用 ref 引用页面上的组件实例，则可以按照如下方式：

使用ref属性，为对应的组件添加引用名称

<my-counter ref="counterRef"></my-counter> <button @click="getRef">获取 $refs 引用</button>

methods: { getRef(){

// 通过 this.$refs. 引用的名称，可以引用组件的实例 console.log(this.$refs.counterRef)

// 引用到组件的实例之后，就可以调用组件上的methods方法 this.$refs.counterRef.add()

}