<!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>
运行效果预览：
