Vue $root、$parent、$refs

 

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 的區別

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() } } })