实例 Vue 使用子组件中的 $parent 对象来更改父组件中的 'text' 数据属性

<template>

  <h2>Example $parent Object</h2>

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

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

  <info-box />

</template>

​

<script>

export default {

  data() {

    return {

      text: 'Initial text in the parent component.'

    }

  }

}

</script>

​

<style>

pre {

  background-color: lightgreen;

  padding: 5px;

}

</style>