前言
今天继续给大家带来provide和jinject的使用
父组件
<template>
<div>
<HelloGeyao></HelloGeyao>
</div>
</template>
<script>
import HelloGeyao from "../src/views/HelloGeyao.vue"
export default {
data(){
return{
msg:"geyao",
}
},
components:{
HelloGeyao
},
provide: function () {
return {
geyao: this.getGeyao // 把当前Vue对象提供给所有子组件可以访问
}
},
methods:{
getGeyao(){
return this.msg
}
}
}
</script>
子组件
<!--
* @Component:
* @Maintainer:
* @Description:
-->
<template>
<div class="container">
geyao
</div>
</template>
<script>
export default {
inject:['geyao'],
data() {
return {
}
},
mounted() {
this.createLineChart()
},
methods: {
createLineChart() {
console.log(this.geyao(),"data is")
}
},
components: {
}
}
</script>
<style scoped lang="scss"></style>