Vue3/ Vue3 组件通讯 --- 父传孙 provide inject 方法流程 总结 、 javascript里面的模块规范

一 .Vue3 组件通讯 --- 父传孙 provide inject 方法流程 总结

1.分别创建 父亲 儿子 孙子 组件 并 import 相应引入 子 孙 组件

父组件

  <son />

import  son  from './son.vue';

儿子组件 

 <grandson />

import grandson from './grandson.vue';

孙子组件不需要引入

2.父组件引入 ref provide ，并为 ref 定义变量名 将变量名 塞入 provide内事件名位置  逗号后面是该事件名内的内容

import { provide, ref } from 'vue'

const  事件名   =   ref(100)

rovide('事件名', 该事件名内的内容)

3. 孙子组件引入 inject  并 inject 内接收事件名 然后给inject 变量， template标签内使用该变量渲染

import { inject } from 'vue'
const 变量名 = inject('事件名')
<template>
  <div> {{ 变量名 }} </div>
</template>

总结: 

provide inject 功能 :  他们可以把一个祖先组件指定的数据和方法 传递给其所有的子孙组件 

注意: Vue不会对 provide 内的变量进行响应式处理 所以 要想 inject 接受的变量是响应式的 provide提供的变量本身就必须是响应式的
 

二 .javascript里面的模块规范

commnjs --- nodejs require 导入 exports导出

描述:

我之前的项目里面采用的是dayjs 因为他比较小 但是功能和 momentjs 一模一样 我之前写了一评论模块 为了让其他人看到这个评论距离现在的时间 我使用了dayjs 的一个插件 relativeTime 返回现在到当前实例的相对时间 输出一些几秒前 1分钟以前等等 比较符合用户的产品使用的习惯 小程序 h5 用户体验一定要好 记得加 dayjs