Vue处理边界之$root、$parent、$refs

一时失言乱红尘 2021-11-26 20:52 540阅读 0赞

### Vue处理边界之![root、][root]parent、$refs ###

下面的功能都是有风险的，尽量避免使用

1.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'
        }
    })

2.![root 和][root 1]parent 的区别

![root 和][root 1]parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过![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'
        }
    })

3.$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()
            }
        }
    })

原文：[https://www.jianshu.com/p/2993c2cd6d68][https_www.jianshu.com_p_2993c2cd6d68]

转载于:https://www.cnblogs.com/robinunix/p/10876641.html

[root]: https://math.jianshu.com/math?formula=root%E3%80%81
[root 1]: https://math.jianshu.com/math?formula=root%20%E5%92%8C
[parent]: https://math.jianshu.com/math?formula=parent%20%E8%AE%BF%E9%97%AE%E5%BE%97%E5%88%B0%E7%9A%84%E6%98%AF%E5%AE%83%E6%9C%80%E8%BF%91%E4%B8%80%E7%BA%A7%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%EF%BC%8C%E9%80%9A%E8%BF%87
[https_www.jianshu.com_p_2993c2cd6d68]: https://www.jianshu.com/p/2993c2cd6d68