实例 Vue 使用子组件中的 $parent 对象，引用父组件中的方法

<template>

  <h2>Example $parent Object</h2>

  <p v-bind:style="{ backgroundColor: color }">The method that changes color can be reached directly from the child component by the use of the $parent object.</p>

  <div>

    <info-box />

  </div>

</template>

​

<script>

export default {

  data() {

    return {

      color: 'lightgreen'

    }

  },

  methods: {

    toggleColor() {

      if(this.color === 'lightgreen'){

        this.color = 'pink'

      }

      else {

        this.color = 'lightgreen'

      }

    }

  }

}

</script>