vue 组件间通讯的几种传值方法总结

本文共有961个字,关键词:

一、父组件传值给子组件

  1. 使用props传值(官方推荐)。
  2. 使用data-*="xxx"的属性,数据将自动添加到子组件的根元素。
  3. 使用$refs直接操作子组件的数据。
  4. slot插槽(用于模板内容的传递)

二、子组件传值给父组件

通过props传值的方式是单向的,即父组件的属性变化时将会传到给子组件,但反过来就不能。子组件如果改变props的值,vue将会在console发出警告。

  1. 通过自定义事件$emit传值: 在子组件定义事件,然后通过$emit派发出去,父组件监听子组件的事件并获取参数。
  2. 使用.sync修饰符,在vue2.3.0以后.sync修饰符实质上是一个$emit事件的语法糖,emit的事件名称是update:xx。(xx表示自定义事件的名称,具体请看官网)。
  3. 使用v-model进行双向绑定,官网

三、非父子组件间通信

  1. 使用空的Vue实例作为事件的总栈,官网
  2. Vuex全局状态管理。

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

fengxianqi

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。
添加新评论
暂无评论