[vue3进阶] 7.注入——Provide / Inject

注入听起来好像很高大上，其实在vue里非常简单，我们还是通过一个小例子还学习，
在这个例子里，我们在App.vue里使用heroList组件，heroList组件里又使用了heroItem组件，
它们的嵌套关系：

App——>heroList——>heroItem

我们把代码先写好
heroItem.vue

<template>
  <div>{{ heroName }}</div>
</template>

<script>
export default {
  props: {
    heroName: {
      type: String,
      default: '',
    },
  },
}
</script>

<style></style>

heroList.vue

<template>
  <ul>
    <li v-for="item in list" :key="item">
      <hero-item :heroName="item"></hero-item>
    </li>
  </ul>
</template>

<script>
import heroItem from './heroItem.vue'
export default {
  components: { heroItem },
  data() {
    return {
      list: ['列昂纳多', '拉斐尔', '米开朗基罗', '多纳泰罗'],
    }
  },
}
</script>

<style></style>

App.vue

<template>
  <div>
    <hero-list></hero-list>
  </div>
</template>

<script>
// provide inject
import heroList from './components/heroList'
export default {
  name: 'App',
  components: { heroList },
  data() {
    return {}
  },
}
</script>

<style></style>

现在基本结构完成了，列表也显示出来了

现在有个需求，在App.vue里面有个字体大小的数据largeFont，需要控制列表里面的字体大小，
通过我们以前学的可以通过props传递给heroList，heroList再次通过props传给heroItem，
但是明显这样很麻烦，而且heroList根本不用这个数据，还得传递一遍

这时候就可以用注入——Provide / Inject
它们的作用就是可以在父组件中provide注入数据，在子组件或者子子组件中，只要是后代组件，就可以把这个数据inject注入进来，直接使用，不用管中间的组件有没有获取这个数据

在我们的例子中，我们需要在App.vue里面provide一个数据

<script>
// provide inject
import heroList from './components/heroList'
export default {
  name: 'App',
  components: { heroList },
  data() {
    return {}
  },
  provide:{ // 新增
    largeFont: 20
  }
}
</script>

直接在heroItem里注入就可以使用了

<template>
  <div :style="{ 'font-size': largeFont + 'px' }">{{ heroName }}</div>
</template>

<script>
export default {
  props: {
    heroName: {
      type: String,
      default: '',
    },
  },
  inject: ['largeFont'], // 新增
}
</script>

<style></style>

最后渲染的时候字体也变大了

<div style="font-size: 20px;">列昂纳多</div>

这样可以直接在template绑定，也可以在script里用this直接获取

  mounted() {
    console.log('注入的largeFont的值是：' + this.largeFont)
  },

输入出了

注入的largeFont的值是：20

Provide / Inject的用法就是这么简单，在父组件里provide，在任何后代组件中都可以inject

但是在实际开发中用得并不多，因为跨组件传递数据，我们首选还是vuex，vuex我们后面会继续学习。