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