vue 处理组件边界情况

# vue 处理组件边界情况

在vue文档中有处理组件边界情况的api:

- `$root`:存储到根实例中
- `parent`/`children`，可以访问父组件、子组件的属性，也可以进行修改
- `$refs`：可以访问子组件
- 依赖注入`provide`/`inject`

## 1.$root

我们在创建`vue`实例的时候可以将数据挂载到根节点

`main.js`

```js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  data: {
    title: '根实例 - Root'
  },
  methods: {
    handle () {
      console.log(this.title)
    }
  }
}).$mount('#app')

```

在组件中使用根实例上的属性

`01-root.vue`

```html
<template>
  <div>
    
    $root.title：{{ $root.title }}
    <br>
    <button @click="$root.handle">获取 title</button>&nbsp;&nbsp;
    <button @click="$root.title = 'Hello $root'">改变 title</button>
  </div>
</template>

}
</script>

<style>

</style>
```

我们通过‘改变 `title`按钮改变`title`的值，会发现页面也会随之更新，也就是说我们通过`$root`获取的值都是响应式的，我们可以在页面中修改根实例的属性。

## 2.$parent

![](http://5coder.cn/img/1669328557_5fc062c8fbc9bd294fadfcc67f972ee7.png)

`01-parent.vue`

```html
<template>
  <div class="parent">
    parent
    <child></child>
  </div>
</template>

`02-child.vue`

```html
<template>
  <div class="child">
    child<br>
    $parent.title：{{ $parent.title }}<br>
    <button @click="$parent.handle">获取 $parent.title</button>
    <button @click="$parent.title = 'Hello $parent.title'">改变 $parent.title</button>
  
    <grandson></grandson>
  </div>
</template>

`03-grandson.vue`

```html
<template>
  <div class="grandson">
    grandson<br>
    $parent.$parent.title：{{ $parent.$parent.title }}<br>
    <button @click="$parent.$parent.handle">获取 $parent.$parent.title</button>
    <button @click="$parent.$parent.title = 'Hello $parent.$parent.title'">改变 $parent.$parent.title</button>
  </div>
</template>

通过`$parent.x`可以获取父组件的属性或方法.

修改`parent`中的属性，可以发现我们引入的也发生变化，因此我们通过`parent`获取的数据是响应式的。

我们通过`props`获取的数据是不可修改，这个是两者之间的区别。

## 3.$children

![](http://5coder.cn/img/1669328757_da1b43339f0e2741af15b0058865a8a2.png)

`01-parent.vue`

```html
<template>
  <div>
    <children1></children1>
    <children2></children2>

<button @click="getChildren">获取子组件</button>
  </div>
</template>

this.$children[0].handle()
      this.$children[1].handle()
    }
  }
}
</script>

<style>

</style>
```

`02-children1.vue`

```html
<template>
  <div>children1</div>
</template>

<style>

</style>
```

`03-cildren2.vue`

```html
<template>
  <div>children2</div>
</template>

<style>

</style>
```

- 我们通过`$children`可以获取组件数组，所以我们需要根据下标进行取值
- 我们通过`$children`获取的属性是响应式的，若我们在父组件或子组件中修改，值都会发生改变。
- 但当我们子组件中还有子组件，我们想要获取的值嵌套层级就会很深。
- 可读性不高，因为我们需要使用下标去指定想要的组件

## 4.$refs

`01-parent.vue`

```html
<template>
  <div>
    <myinput ref="mytxt"></myinput>

<style>

</style>
```

`02-myinput.vue`

```html
<template>
  <div>
    <input v-model="value" type="text" ref="txt">
  </div>
</template>

<style>

</style>
```

- `$refs` 可以放在2个位置，一个是组件上，一个是元素上，如果是放在组件上则获取的是组件信息，否则获取的是元素`dom`属性。
- `$refs` 使用的时候需要在页面加载完成才可以，比如在`mounted`生命周期才可获取

## 5.provide/inject

可以让我们在组件嵌套比较多的时候利用`依赖注入`获取相关的属性。

- `provide`与`inject`是成对出现的
- `inject`注入到子组件中的成员不是响应式的
- 组件之间的耦合变高，组件嵌套比较多的情况下可以使用`provide`/`inject`

`01-parent.vue`

```html
<template>
  <div class="parent">
    parent
    <child></child>
  </div>
</template>

`02-child.vue`

```html
<template>
  <div class="child">
    child<br>
    title：{{ title }}<br>
    <button @click="handle">获取 title</button>
    <button @click="title='xxx'">改变 title</button>
    <grandson></grandson>
  </div>
</template>

`03-grandson.vue`

```html
<template>
  <div class="grandson">
    grandson<br>
    title：{{ title }}<br>
    <button @click="handle">获取 title</button>
    <button @click="title='yyy'">改变 title</button>
  </div>
</template>

## 6.$attrs/$listeners

`01-parent.vue`

```html
<template>
  <div>

<style>

</style>
```

`02-myinput.vue`

```html
<template>

<!--
    2. 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承
       然后通过 v-bind="$attrs" 把外部传入的非 prop 属性设置给希望的标签上

但是这不会改变 class 和 style
  -->

<style>

</style>
```