vue处理边界情况之$root，$parents，$refs
Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法
官网地址：cn.vuejs.org/v2/guide/co…
<div id="app">
<root-obj></root-obj>
</div>
Vue.component('root-obj', {
data() {
return {
}
},
template: `<div>
<button @click='getRoot'>$Root</button>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
}
})root和parent异同
相同点：都能实现访问父组件的属性和方法
不同点：如果存在多级子组件，parent访问到的是最近一级的父组件，root得到的是它的根组件
<div id="app">
<root-obj></root-obj>
</div>
Vue.component('root-obj', {
data() {
return {
}
},
template: `<div>
<button @click='getRoot'>子组件</button>
<child-component></child-component>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
console.log(this.$parent)
}
}
})
Vue.component('child-component', {
data() {
return {
}
},
template: `<div>
<button @click='getRoot'>子子组件</button>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
console.log(this.$parent)
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
}
})$refs 访问子组件实例
通过在子组件标签定义 ref 属性，在父组件中可以使用$refs 访问子组件实例
<button @click='refView'>通过ref访问子组件</button>
Vue.component('base-input', {
data() {
return {
msg: 'base-input'
}
},
template: `<input type='text'/>`
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
},
methods: {
refView() {
console.log(this.$refs.baseInput)
this.$refs.baseInput.$el.focus()
}
}
})注意；$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
总结：平时用的refs居多，看到官网上的描述，忍不住查了下区别，大家有什么建议，欢迎大家一块学学～
