博客

1：  Vue3.0 中 提供的生命周期走钩子函数注册函数只可以在setup() 函数中使用。

2：注册组件

<template>
  <Demo></Demo>
</template>

<script>
   import Demo form './Demo.vue'
   export dafuult {
     components: {
        Demo
     }
   }
</script>

依赖注入： vue3.0 中注入

3.1： Vue3.0 中提供了provide 和 inject 提供了依赖注入， 用于实现组件之间的通讯。 类似于Vue2 中的provide 和 inject。

3.2： Vue3.0 中提供了provide 和 inject 可以用于跨多级组件通信。

注册组件：
<template>
  <div class="app">
    <h1>钩子函数---- {{money}}</h1>
    <hr />
    <Demo></Demo>
  </div>
</template>

<script>
  import Demo form './Demo.vue'
  import { ref， provide } form 'vue'
  export default {
    components: {
      Demo
    },
    setup() {
     // provide 和 inject
     const money = ref(100)  // 使用ref 函数变成响应式数据

     const changeMoney = (m) => {
        money.value = m
     }

     // 组件提供了money 属性
     provide('money', money);
     provide('changeMoney', changeMoney);

     return {
       money,
     }
    }
  }
</script>

<style>

</style>


// 希望把父组件的数据传递到子组件中： 
子组件 Demo
<template>
  <div class="demo">我是demo组件 ---- {{money}}</div>
  <button @click="fn">修改</button>
</template>
<script>
  import { inject } form 'vue'
  export default {
    props: {
      money: Number
    }
    setup(props) {
      // 注册数据
      const money = inject('money');
      // 注册事件
      const changeMoney = inject('changeMoney')
      const fn = ()=> {
        changeMoney(100)
      }
      return {
       money,
       fn
     }
    }
  }
</script>


优点： 就是只要父组件提供好数据（属性）, 子组件如果使用就是用inject 函数用来接收即可。
每一个子组件如果想要使用直接inject 就可以了inject 数据就可以了。  (适用于组件之间深层次数据传递)