VUE多层组件传递,中间层传递的坑

父组件cu.vue

<template>
  <div>
    <div class="father" @click="father">我是父组件，点击传值给孙子组件</div>
    <child :title="title" :type="type" />
  </div>
</template>
<script>
import child from "./child";
export default {
  name: "cu",
  components: {
    child
  },
  data() {
    return {
      title: "2",
      type: "1"
    };
  },
  methods: {
    father() {
      this.title = "========>  父组件传过来的title";
      this.type = "========>  父组件传过来的type";
    }
  }
};
</script>

儿子组件child.vue

<template>
  <div>
    <div class="child">
      <div>我是儿子组件{{child_title}}</div>
    </div>
    <grandson v-bind="$attrs" />
  </div>
</template>
<script>
import grandson from "./grandson";
export default {
  components: {
    grandson
  },
  props: {//如果这里用props接收了父组件传的值，那孙子组件就接收不到父组件的传值,注意是大坑。
    title: {
      type: String,
      default: ""
    }
  },
  watch: {
    $attrs() {
      console.log(this.$attrs, "attrs");
    },
    title() {
      this.child_title = this.title;
      console.log(this.title, "========》 子组件");
      console.log(this.$attrs, "attrs");
    }
  },
  data() {
    return {
      child_title: "",
      childType: ""
    };
  }
};
</script>

孙子组件child.vue

<template>
  <div>
    <div class="grandson">我是孙子组件{{title}}{{type}}</div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    }
  },
  watch: {
    title() {
      console.log(this.title, "this.title =====> 1孙子组件");
    },
    type() {
      console.log(this.type, "this.type =====> 2孙子组件");
    }
  },
  data() {
    return {};
  }
};
</script>