高级vue setup 中provide和inject用法

父组件

<script>

import { computed, provide, watch } from 'vue'

import {ref,reactive,toRefs} from 'vue'

import father from './components/father.vue'

export default{

    setup() {

        let data = reactive({

            mes: 'adssss',

            userObj: {

                userName: "www.96net.com.cn"

            },

        });

        provide('name', data.mes)

        const add = () => {

            data.mes++;

            console.log(data.mes);

        };

        watch(() => data.mes, (newvalue, oldvlaue) => {

            console.log("n" + newvalue);

            console.log("o" + oldvlaue);

        });

 

        return {

            ...toRefs(data),

            add,

        };

    },

    components: { father}

}

</script>

<template>

  <div id="as">

    {{mes}}

    <br>

  </div>

  <button @click="add">+</button>

  <hr>

  <father></father>

</template>

<style scoped>

</style>

 

子组件

<template>

    www.96net.com.cn

    {{ name }}

  </template>

 

  <script>

  import { inject } from 'vue'

  export default {

    setup() {

      const name = inject('name')

      return {

        name

      }

    }

  }

  </script>