共计 3054 个字符,预计需要花费 8 分钟才能阅读完成。
- 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> | |
正文完