v-bind=“$attrs“,v-on=“$listeners“ provide，inject的使用

最外层 

<template>
<div>
  <Father ref="Father" :title="title" @detail="detail" />
  {{ title2 }}
</div>
</template>

<script>
import Father from './components/Father'
export default {
  name: 'TransData',
  components: { Father },
  data() {
    return {
      title: 'v-bind爷爷传给孙子',
      title2: '',
      msg: 'provide爷爷传给孙子',
      grandMsg: 'provide直接传到孙子组件'
    }
  },
  provide() {
    return {
      demo: this.msg,
      grandMsgFn: () => this.grandMsg
    }
  },
  computed: {},
  created() {},
  methods: {
    detail(val) {
      this.title2 = val
    },
    changegrandMsg() {
      this.title = 'v-bind爷爷传给孙子被修改'
      // provide/inject绑定并不是可响应的
      this.msg = 'provide爷爷传给孙子组件值被修改'
      this.grandMsg = 'provide传到孙子组件值被修改'
    }
  }
}
</script>

中间层 

<template>
  <div>
    中间组件
    <Son
      ref="Son"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import Son from './Son'
export default {
  components: { Son },
  data() {
    return {

    }
  },
  computed: {
  },
  created() {
  },
  methods: {

  }
}
</script>

最内层 

<template>
  <div style="background:yellow">
    <el-button
      type="primary"
      @click="detail"
    >孙子</el-button>
    <div>{{ title }}</div>
    <div>{{ demo }}</div>
    <div>{{ changeGrandMsg }}</div>
  </div>
</template>

<script>
export default {
  name: 'Table1',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  inject: ['demo', 'grandMsgFn'],
  data() {
    return {

    }
  },
  computed: {
    changeGrandMsg() {
      return this.grandMsgFn()
    }
  },
  created() {
  },
  methods: {
    detail() {
      this.$emit('detail', 'v-on孙子反馈给爷爷')
    }
  }
}
</script>