vue处理边界情况

最新推荐文章于 2025-03-05 16:25:01 发布

转载最新推荐文章于 2025-03-05 16:25:01 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c90f3596fb9a070ea79c4de

文章标签：

#javascript #ViewUI

本文介绍了Vue处理边界情况时$root、$parents和$refs的用法。$root和$parents都能访问父组件属性和方法，但多级子组件中，$parent访问最近一级父组件，$root访问根组件。$refs可通过在子组件标签定义ref属性，在父组件中访问子组件实例，不过它在组件渲染完成后生效且非响应式。

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()
        }
    }
})复制代码