<template>
  <div class="app">
    <h3>我是爺爺組件</h3>
    <Parent  :data1="data1" :data2="data2" :data3="data3" @fun1="fun1" @fun2="fun2"></Parent>
  </div>
</template>
<script>
import Parent from './components/Parent.vue'
export default {
  name: "App",
  components: {
    Parent
  },
  data() {
    return {
      data1: '數(shù)據(jù)1',
      data2: '數(shù)據(jù)2',
      data3: '數(shù)據(jù)3'
    }
  },
  methods: {
    fun1(val) {
      console.log('通過子組件觸發(fā)', val);
    },
    fun2(val) {
      console.log('通過子組件觸發(fā)', val);
    }
  }
}
</script>

<template>
  <div class="parent">
    <h3>我是父組件</h3>
    <Son v-bind="$attrs" v-on="$listeners"></Son>
  </div>
</template>
<script>
import Son from './Son'
export default {
//禁用將數(shù)據(jù)顯示在組件根元素的默認操作
  inheritAttrs: false,
  name: 'Parent',
  props: {
    data1: {
      type: String,
      default: ''
    }
  },
  components: {
    Son
  },
  created() {
    console.log(this.$attrs, this.$listeners, 'this.$attrs,this.$listeners');  //data2: "數(shù)據(jù)2", data3: "數(shù)據(jù)3",fun1, fun2
  },
}
</script>

<template>
  <div class="son">
    <h3>我是子組件</h3>
    這是爺爺?shù)臄?shù)據(jù){{user}} <br>
    這是自己的數(shù)據(jù){{myUser}}<br>
    <button @click="toParent">傳遞數(shù)據(jù)給父組件</button>
  </div>
</template>
<script>
import Son from './Son'
export default {
  name: 'Son',
  components: {
    Son
  },
  props: {
  //接收父組件的數(shù)據(jù)
    data2: {
      type: String,
      default: ''
    },
    data3: {
      type: String,
      default: ''
    }
  },
  created() {
    console.log(this.data2, this.data3, '$attrs');
  },
  methods: {
    toParent() {
    //觸發(fā)父組件的方法
      this.$emit('fun1', '我是孫組件數(shù)據(jù)')
    }
  }
}
</script>