parent用法

今天我们来看看vue.js的另一个很好用的api parent，parent用于存在父子关系的组件，在子组件可以使用this.$parent获取到父组件的属性和方法

父组件

<template>
  <div>
    <Children></Children>
  </div>
</template>

<script>
import Children from '@/components/ParentCom.vue'

export default {
  components: {
    Children
  },
  data() {
    return {
      a: 1
    }
  },
  methods: {
    hello() {
      alert("被子组件调用");
    }
  }
}
</script>

子组件

<template>
    <div>
        {{ $parent.a }}
        <br />
        <button @click="$parent.hello()">调用父组件方法</button>
    </div>
</template>

<script>
export default {
    created() {
        console.log(this.$parent);
    }
}
</script>