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可以深层（爷孙）传值，不仅仅是父子之间的传值