前言

今天继续给大家带来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>

运行结果

Vue2中的provide和inject使用_Vue