Vue處理邊界之
parent纺讲、$refs
下面的功能都是有風險的，盡量避免使用
Vue 子組件可以通過 $root 屬性訪問父組件實例的屬性和方法
<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'
}
})
parent 的區(qū)別
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()
}
}
})
