- App.vue
<script>
import HomeView from "./components/HomeView.vue";
export default {
data() {
return {
message: '',
};
},
methods:{
getChildMsg:function (value){
console.log(value);
this.message=value
}
},
components:{
HomeView
}
}
</script>
<template>
<div>
<HomeView/>
</div>
</template>
- HomeView.vue
<template>
<div>
<Content/>
</div>
</template>
<script>
import Content from "./Content.vue";
export default {
data(){
return{
message: "Hellokugou",
}
},
//provide:{message:"Hellokugou"},
provide(){
return{
message:this.message
}
},
name: "HomeView",
components: {
Content
}
}
</script>
<style scoped>
</style>
- Content.vue
<template>
<div>
<!--组件是能够复用 -->
<HelloKugou></HelloKugou>
</div>
</template>
<script>
import HelloKugou from "./HelloKugou.vue";
export default {
data(){//让每一个组件对象都返回一个对象,不对数据净化
return{
};
},
components:{
HelloKugou
},
methods:{
},
name: "Content"
}
</script>
<style scoped>
</style>
- HelloKugou.vue
<template>
<div>
<h2>I am hello 组件</h2>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "HelloKugou",
data(){
return{};
},
inject:['message']
};
</script>
HomeView组件是 HelloKugou的祖父组件,HelloKugou获取HomeView组件的message
Provide和 Inject 相似prop
响应式
- App.vue
<script>
import HomeView from "./components/HomeView.vue";
export default {
data() {
return {
message: '',
};
},
methods:{
getChildMsg:function (value){
console.log(value);
this.message=value
}
},
components:{
HomeView
}
}
</script>
<template>
<div>
<HomeView/>
</div>
</template>
- HomeView.vue
<template>
<div>
<Content/>
<button @click="obj.message='雷好呀'">扭转message</button>
<h2>HomeView--{{obj.message}}</h2>
</div>
</template>
<script>
import Content from "./Content.vue";
export default {
data(){
return{
message: "Hellokugou",
obj:{
message: "Hellokugou"
},
}
},
//provide/inject不是响应式的,
//provide:{message:"Hellokugou"},
provide(){
return{
//message:this.message
obj:this.obj
}
},
name: "HomeView",
components: {
Content
}
}
</script>
<style scoped>
</style>
- Content.vue
<template>
<div>
<!--组件是能够复用 -->
<HelloKugou></HelloKugou>
</div>
</template>
<script>
import HelloKugou from "./HelloKugou.vue";
export default {
data(){//让每一个组件对象都返回一个对象,不对数据净化
return{
};
},
components:{
HelloKugou
},
methods:{
},
name: "Content"
}
</script>
<style scoped>
</style>
- HelloKugou.vue
<template>
<div>
<h2>I am hello 组件</h2>
<h2>{{obj.message}}</h2>
</div>
</template>
<script>
export default {
name: "HelloKugou",
data(){
return{};
},
//inject:['message']
inject:['obj']
};
</script>
函数响应式
- HomeView.vue
<template>
<div>
<Content/>
<button @click="message='雷好呀'">扭转message</button>
<h2>HomeView--{{obj.message}}</h2>
</div>
</template>
<script>
import Content from "./Content.vue";
export default {
data(){
return{
message: "Hellokugou",
obj:{
message: "Hellokugou"
},
}
},
//provide/inject不是响应式的,
//provide:{message:"Hellokugou"},
provide(){
return{
//message:this.message
//obj:this.obj //响应式对象形式
message:()=>this.message //函数返回响应式
}
},
name: "HomeView",
components: {
Content
}
}
</script>
<style scoped>
</style>
- HelloKugou.vue
<template>
<div>
<h2>I am hello 组件</h2>
<!-- <h2>HelloKugou--{{message()}}</h2>-->
<h2>HelloKugou1--{{newMsg}}</h2>
<h2>HelloKugou2--{{newMsg}}</h2>
<h2>HelloKugou3--{{newMsg}}</h2>
</div>
</template>
<script>
export default {
name: "HelloKugou",
data(){
return{};
},
computed:{
newMsg:function (){
return this.message()
}
},
inject:['message']
//inject:['obj']
};
</script>