# 组件访问（了解）
组件访问指的是嵌套组件之间，会形成父子组件。子组件可以用 `this.$parent` 访问父组件，父组件可以用 `$children` 访问子组件。
>[warning] 减少使用 `$parent` 和 `$children`它们的主要目的是作为访问组件的应急方法。
> 推荐用 props 和 events 实现父子组件通信
## 父组件访问子组件两种方式
`$children`和`$refs` 这两种方式推荐用后者。
```
var vm = new Vue({
el: "#app",
data: {
txt: '456'
},
mounted() {
console.log(this.$refs.ym.$options.propsData.msg)
}
})
```
>[danger] ### $children的缺陷：
> 通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
> 但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
> 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs
>[success] ### $refs的使用：
> $refs和ref指令通常是一起使用的。
> 首先，我们通过ref给某一个子组件绑定一个特定的sign(标识)。
> 其次，通过this.$refs.sign就可以访问到该组件了。
## 子组件访问父组件
`$parent`
```
Vue.component('ym-alert', {
props: ['msg'],
template: ` <div class="alert alert-danger">{{msg}} <ym-abc></ym-abc></div>`,
mounted() {
console.log(this.$parent.txt = 789)
}
});
```
>[danger] 尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。
> 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。
> 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
> 另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。
## 访问根组件
`$root`
```
Vue.component('ym-abc', {
template: `<div>2252522</div>`, mounted() {
console.log(this.$root)
this.$root.txt = 7816196
}
})
```
>[danger] $root的问题与$parent很类似。不再赘述，不建议使用
## 代码
```
<div class="container" id="app">
{{txt}}
<ym-alert ref="ym" msg="123"></ym-alert>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('ym-abc', {
template: `<div>2252522</div>`, mounted() {
console.log(this.$root)
this.$root.txt = 7816196
}
})
Vue.component('ym-alert', {
props: ['msg'],
template: ` <div class="alert alert-danger">{{msg}} <ym-abc></ym-abc></div>`,
mounted() {
//console.log(this.$parent.txt = 789)
}
});
var vm = new Vue({
el: "#app",
data: {
txt: '456'
},
mounted() {
console.log(this.$refs.ym.$options.props.msg)
}
})
</script>
```
