vue 处理组件边界情况

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

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

$root

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

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

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

```
// src/components/01-root/01-root.vue
<template>
  <div>
    <!--
      小型应用中可以在 vue 根实例里存储共享数据
      组件中可以通过 $root 访问根实例
    -->
    $root.title：{{ $root.title }}
    <br>
    <button @click="$root.handle">获取 title</button>&nbsp;&nbsp;
    <button @click="$root.title = 'Hello $root'">改变 title</button>
  </div>
</template>

<script>
export default {

}
</script>
```

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

$parent

```
//  src\components\02-parent\01-parent.vue
<template>
  <div class="parent">
    parent
    <child></child>
  </div>
</template>

<script>
import child from './02-child'
export default {
  components: {
    child
  },
  data () {
    return {
      title: '获取父组件实例'
    }
  },
  methods: {
    handle () {
      console.log(this.title)
    }
  }
}
</script>

// src\components\02-parent\02-child.vue
<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>

<script>
import grandson from './03-grandson'
export default {
  components: {
    grandson
  }
}
</script>

// src\components\02-parent\03-grandson.vue

<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>

<script>
export default {
}
</script>

```

• 通过$parent.x 可以获取父组件的属性或方法
• 修改$parent中的属性，可以发现我们引入的也发生变化，因此我们通过$parent获取的数据是响应式的。
• 我们通过props获取的数据是不可修改，这个是两者之间的区别

$children

```
// src\components\03-children\01-parent.vue
<template>
  <div>
    <children1></children1>

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

<script>
import children1 from './02-children1'
export default {
  components: {
    children1
  },
  methods: {
    getChildren () {
      console.log(this.$children)
      console.log(this.$children[0].title)
      this.$children[0].handle()
    }
  }
}
</script>

// src\components\03-children\02-children1.vue
<template>
  <div>children1</div>
</template>

<script>
export default {
  data () {
    return {
      title: 'children1 获取子组件 - title'
    }
  },
  methods: {
    handle () {
      console.log(this.title)
    }
  }
}
</script>
```

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

$refs

```
// src\components\04-ref\01-parent.vue
<template>
  <div>
    <myinput ref="mytxt"></myinput>
  </div>
</template>

<script>
import myinput from './02-myinput'
export default {
  components: {
    myinput
  },
  methods: {
    focus () {
      this.$refs.mytxt.focus()
    }
  }
}
</script>

// src\components\04-ref\02-myinput.vue

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

<script>
export default {
  data () {
    return {
      value: 'default'
    }
  },
  methods: {
    focus () {
      this.$refs.txt.focus()
    }
  }
}
</script>

```

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

provide/inject

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

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

```
在父组件中
provide () {
    return {
      title: this.title,
      handle: this.handle
    }
}
在子组件中或子子组件中：
inject: ['title', 'handle']
```