实例 使用子组件中的 $root 对象，更改 Vue 应用程序根组件中的 'text' 数据属性

<template>

  <h2>Example $root Object</h2>

  <p>The 'text' data property can be reached and manipulated directly from a child component by the use of the $root object.</p>

  <pre>{{ text }}</pre>

  <info-box />

</template>

​

<script>

export default {

  data() {

    return {

      text: 'Initial text in the root component.'

    }

  }

}

</script>

​

<style>

pre {

  background-color: lightgreen;

  padding: 5px;

}

</style>