在vue3.x中使用provide

在setup中使用provide时，我们首先从vue显示导入provide的方法，这使我们能够调用provide时来定义每个provide。

provide函数允许你通过两个参数定义provide：

1. provide的name(<string>类型)：

2. provide的value

在父组件中声明：

  //第一种写法
  // provide:{
  //   title:'我是provide'
  // },
  
  //第二种写法
  provide(){
    return{
      title:'我是provide方法'
    }
  },

在子组件中注册和使用

<template>
<div class='home'>
  {{title}}  <!--我是provide方法-->
</div>
</template>
<script>
// import {} from 'vue'
export default {
name: 'home',
inject:["title"],
data(){
  return {
    msg:''
    
  }
},
}
</script>

以上的操作，在vue2.x版本中是无法实现数据的响应式修改的，在vue3.x中我们借助setup可以实现响应式这一原理。

父组件代码实例

<template>
<!-- vue3.x -->
<div class='home'>
  {{title}}
  <input text="" v-model="title"/>
  <Provide></Provide>
</div>
</template>
<script>
import Provide from './provide'
import {ref, provide，reactive } from 'vue'
export default {
name: 'home',
setup(){
  let title = ref('app根组件的title')
  // 如果是对象就用 reactive 方法
  // const obj = reactive()
  provide('title',title)
  return{
    title
  }
},
components:{
  Provide
},
data(){
  return {
    msg:'wuhan'
  }
},
}
</script>

子组件代码实例

<template>
<!-- vue3.x -->
<div class='home'>
  {{title}}
</div>
</template>
<script>
import {inject} from 'vue'
export default {
name: 'home',
setup(){
// inject 里面的值的名字与父组件名字相同
  let title = inject('title')
  return{
    title
  }
 },

data(){
  return {
    msg:'ssss'
    
  }
},

}
</script>
<style lang='less' scoped>
</style>

上面的方法就是vue3.x利用setup实现provide的响应式父子间传值的方式。确实相比于vue2.x传值方便太多了。加油，小伙伴们！