<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--访问根实例--</h1>
        <div id="example1">
            <visit-root></visit-root>
        </div>
        <script>
        Vue.component('visit-root', {
            template: '\
                <div>\
                <p>{{ this.$root.one }}</p>\
                <p>{{ this.$root.two = 11 }}</p>\
                <p>{{ this.$root.bar }}{{ this.$root.three }}</p>\
                <button v-on:click="this.$root.baz">访问baz</button><p>{{ this.$root.four }}</p>\
                </div>\
            '
        })
        // Vue 根实例
        var example1 = new Vue({
            el: '#example1',
            data: {
                one: 1,
                two: 10,
                three: 100,
                four: 1000
            },
            computed: {
                bar: function () {
                    this.three += 1
                }
            },
            methods: {
                baz: function () {
                    this.four += 1
                }
            }
        })
        </script>
        </div>
    </body>
</html>

运行效果预览：