console 命令行工具 X clear

console

 /**
  * 使用provide/inject的简单例子。
  */

 const wrapper = {
    data() { 
        return {
            info: {
                userName: 'chua'
            }
        }
    },
    provide() {
        //设置为可监听的对象
        return {
            info: this.info
        }
    },
    mounted() { 
        setTimeout(() => {
            this.info.userName = 'yyqing'
        }, 1000)
    },
    render(h) {
        return h('div',[
            '1s后更改名称：',
            ...this.$slots.default
        ])
    }
};

const showname = {
    template: `<span>{{fatherInfo.userName}}<div>`,
    inject: {
        fatherInfo: 'info'
    }
}

Vue.component('showname', showname)

var app = new Vue({
    el: '#app',
    components: { wrapper }
})

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div id="app">
        <wrapper><showname/></wrapper>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</body>