组件通信
2020-06-07 10:26:11 41 举报AI智能生成
vue组件通信
作者其他创作
大纲/内容
组件通信
父子组件
父组件向子组件传值
属性props
引用refs
父组件中
this.$refs.子组件的ref值.属性
父组件先于子组件创建
$children
this.$children
子元素不保证顺序，也并不是响应式
子向父传值
自定义事件$emit
观察者模式
子组件派发，父组件监听
需要注意：
事件的派发者是谁，事件的监听者就是谁
兄弟组件
通过共同的祖辈组件搭桥
$parent
$parent.$emit()派发
$parent.$on()监听
$root
祖先和后代之间
provide/inject
用法
provide() {
return {foo: 'foo'}
}
return {foo: 'foo'}
}
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>
职业：暂无
0 条评论
下一页
