（二）@vue/composition-api 之 provide/inject

父组件：

<template>
  <div>
    father: {{ name }}
    <Child />
  </div>
</template>

<script>
import { defineComponent, ref, provide } from '@vue/composition-api'
import Child from './child.vue'
export default defineComponent({
  components: {
    Child
  },
  setup () {
    let name = ref('zfb')
    // 传递变量
    provide('name', name)

    setTimeout(() => {
      // 子组件会变成 lyf
      name.value = 'lyf'
    }, 2000)

    // 传递方法
    const changeName = () => {
      name.value = 'lyf happy'
    }

    provide('changeName', changeName)

    // 传递函数+参数
    const changeNameProps = val => {
      name.value = val
    }

    provide('changeNameProps', changeNameProps)

    return {
      name
    }
  },
})
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    child: {{ name }}
    <div @click="changeName">child changeName</div>
    <div @click="changeNamePropsChild">child changeName props</div>
  </div>
</template>
<script>
import { defineComponent, inject } from '@vue/composition-api'
export default defineComponent({
  setup() {
    // 接受参数
    const name = inject('name')
    // 接受方法
    const changeName = inject('changeName')
    // 接受方法
    const changeNameProps = inject('changeNameProps')

    // 方法传参
    const changeNamePropsChild = () => {
      changeNameProps('happy forever')
    }
    return {
      name,
      changeName,
      changeNamePropsChild
    }
  },
})
</script>