<template>
  <div>
    <div>父親組件</div>
    <Child
      :foo="foo"
      :zoo="zoo"
      @handle="handleFun"
    >
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      foo: 'foo',
      zoo: 'zoo'
    }
  },
  methods: {
    // 傳遞事件
    handleFun(value) {
      this.zoo = value
      console.log('孫子組件發(fā)生了點擊事件，我收到了')
    }
  }
}
</script>

<template>
  <div class='child-view'>
    <p>兒子組件--{{$props.foo}}與{{foo}}內容一樣</p>
    <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default {
  // 繼承所有父組件的內容
  inheritAttrs: true,
  components: { GrandChild },
  props: ['foo'],
  data() {
    return {
    }
  }
}
</script>

<template>
  <div class='grand-child-view'>
    <p>孫子組件</p>
    <p>傳給孫子組件的數(shù)據(jù)：{{zoo}}</p>
    <button @click="testFun">點我觸發(fā)事件</button>
  </div>
</template>

<script>
export default {
  // 不想繼承所有父組件的內容,同時也不在組件根元素dom上顯示屬性
  inheritAttrs: false,
  // 在本組件中需要接收從父組件傳遞過來的數(shù)據(jù)，注意props里的參數(shù)名稱不能改變，必須和父組件傳遞過來的是一樣的
  props: ['zoo'],
  methods: {
    testFun() {
      this.$emit('handle', '123')
    }
  }
}
</script>