前端学习——处理边界情况

一 访问元素&组件

1.1 访问根实例

在之前的组件学习中，我们知道自定义组件是没办法访问到VUE实例里的东西的，这是为什么呢？这是因为新建vue实例的时候有匹配一个id，而vue实例里的data、computed、components等就是在这个id对应的组件里的。
因此自定义组件作为子组件是没办法用到的。而要使用也很简单：

Vue.component('test',{
   
    template:`
        <div>{
    {this.$root.hello}}</div>
    `
})

new Vue({
   
    el: '#app',
    data:{
   
        hello:"你好哇 李银河"
    },
    components: {
   
        touch_root:{
   
            template:`
                <div>{
    {this.$root.hello}}</div>
            `
        }
    }
})

全局注册和局部注册都一样：

    <div id="app">
        <test></test>
        <touch_root></touch_root>
    </div>

1.2 访问父级组件实例

VUE实例解释
父级组件实例
自定义组件parent和show_data：parent组件就是show_data组件的父组件。div是根实例

<div id="root">
    <parent>
        <show_data></show_data>
    </parent>
</div>

根节点：