vue跨组件传值爷孙组件传值

爷

<template>
  <div>
    <about></about>
  </div>
</template>
<script>
import about from "./About";
export default {
  components: { about },
  provide() {
    return {
      reload: {
        name:"malinshu"
      },
    };
  }
};
</script>

父

<template>
  <div>
    <hack></hack>
  </div>
</template>
<script>
import hack from './hack'
export default {
  components:{hack}
};
</script>

孙

<template>
  <div class="hack">
    {{reload.name}}
    <input type="text" v-model="myData.name">
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data(){
    return{
      myData:this.reload
    }
  }
}
</script>

因为传的是对象，所以是浅拷贝，要深拷贝，可以用

myData:JSON.parse(JSON.stringify(this.reload))

其实用法和props一样，然而区别在于provide可以深层（爷孙）传值，不仅仅是父子之间的传值