组件通信

组件通信有哪些

EventBus ($emit / $on)
$parent / $children

全局：provide / inject
父子：props $emit 
ref 
attrs / listeners
vuex / pinia

v-model表单绑定

• 双向绑定实现

  • 总体思路：单向绑定+同步事件监听

  <input type="text"
  :value="testMsg"       													单向绑定
  @input="this.testMsg = $event.target.value">							事件监听

• 简写 ： v-model=""

  • 实际为： v-model:modelValue=""
  • 需要子组件挂载，定义。返回

数据穿透

• 响应式数据

  1. 原始数据类型：从Vue中导入computed，对数据进行包裹
  2. 转变为引用类型数据

• provide 父组件使用provide传递给子组件

  • 当provide是数组时，不可以读取data里的数据
  • provide为函数时，像data一样返回数据，可以读取data里的数据

• inject 子组件使用inject接收

• 技巧：

  • 传入配置项，通过provide传递给所有子组件

• 数据缓存

  • keep-alive

• ★ref

  • 将基本数据类型进行包裹，使其具有引用特性，以便于数据响应

  • 标签设置属性 ref="xxx"

  • 调用时，使用this.$refs.xxx 进行调用

  • 小技巧：

    • 对component标签设置ref，对其动态定位