组件通信方式

组件通信

父子组件通信

组件通信方式_第1张图片

单向数据流

组件通信方式_第2张图片

组件通信方式_第3张图片

  1. 属性传递props(还有插槽,$attrs非属性)
  2. @/$emit,发布订阅模式

组件通信方式_第4张图片

方法也可以作为属性

组件通信方式_第5张图片组件通信方式_第6张图片

父子组件渲染生命周期:

组件通信方式_第7张图片

  1. 获取组件实例。$children、ref&$refs/$parent

祖先和后代

组件和后代通信的技术方案:上下文,祖先组件有个容器:上下文provide

后代:inject

都挂载到实例上

provide不是响应式的,

组件通信方式_第8张图片组件通信方式_第9张图片

你可能感兴趣的:(vue.js,前端)