vue 组件通讯(简洁版)

117 阅读1分钟

父到子

通过自定义属性 在子组件内部 用props 接收 (单向数据流  props验证)

子到父

<btn :add="add"></btn>
props:["add"]
1   把父组件内的方法 通过自定义属性的方式 传递给子组件, 在子组件内部 用 props 接收 ,
    在子组件的内部 通过调用来自于父组件传递过来的方法 从而实现 向父组件 传递或修改 父组件的数据

<btn @add="add"></btn>
 emits:["add"] 可写可不写
  2   把父组件内的方法 通过自定义事件的方式 传递给子组件,在子组件内部 用 $emit("事件名字",参数1,参数2)  调用来自于父组件传递过来的方法 从而实现 向父组件 传递或修改 父组件的数据

<btn v-model:msg="msg"></btn>
props:["msg"]
emits:["update:msg"] 可写可不写
<btn v-model="msg"></btn>
props:["modelValue"]
emits:["update:modelValue"] 可写可不写
3   在组件标签上 使用 v-model
当v-model 后面 没起名字的时候  默认叫 modelValue  不起名字 只能有 一个

其他

4   本地存储

5   后代传值   Provide / Inject  不光是 父子 , 爷孙也行

6   兄弟组件传值    bus总线  通过创建一个 空的 vue 实例 作为中转  用 $on $emit 这俩方法 实现  (vue2)

7   vuex