首页  思维导图  详情



 



组件通信

2020-06-07 10:26:11   42  举报





AI智能生成

vue组件通信

vue

vue组件通信

模板推荐

作者其他创作

大纲/内容

组件通信

父子组件

父组件向子组件传值

属性props

引用refs

父组件中

this.$refs.子组件的ref值.属性

父组件先于子组件创建

$children

this.$children

子元素不保证顺序，也并不是响应式

子向父传值

自定义事件$emit

观察者模式

子组件派发，父组件监听

需要注意：

事件的派发者是谁，事件的监听者就是谁

兄弟组件

通过共同的祖辈组件搭桥

$parent

$parent.$emit()派发

$parent.$on()监听

$root

祖先和后代之间

provide/inject

用法

provide() {<br>  return {foo: 'foo'}<br>}

inject: ['foo']

一般用于为高阶组件/组件库提供用例，并不推荐直接用于应用程序代码中

官方建议在使用注入的时候，尽量不要去改，尽可能的去读取

如果想要通过这种方法去改的话，可以传递一个修改数据的函数

任意两个组件之间

事件总线

创建一个Bus类负责事件的派发、监听和回调管理

使用

创建

main.js

Vue.prototype.$bus = new Vue()

派发事件/监听事件

this.$bus.$emit(事件)

this.$bus.$on('事件', cb)

vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更

插槽

介绍

插槽语法是Vue实现的内容分发API，用于复合组件开发。该技术在通用组件库开发中有大量应用

匿名插槽

子组件<slot></slot>

父组件<template v-slot:default>匿名插槽</template>

具名插槽

子组件<slot name="content"></slot>

父组件：<template v-slot:content>具名插槽</template>

将内容分发到子组件指定位置

作用域插槽

在子组件中绑定值，在子组件的slot上绑定

在父组件上进行赋值

使用方式

子组件:<slot name="content" msg="hello,world" info="问好"></slot>

父组件: <template v-slot:content="{msg,info}"> {{msg}}  {{info}} </template>

 Collect

Get Started

即时通信

 Collect

Get Started

组件图

 Collect

Get Started

后端组件

 Collect

Get Started

通信库层次





0 条评论

下一页