玖柒的小窝
一文将带你了解Vue中组件化通讯方式
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
搜索
搜索
关闭
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
玖柒的小窝
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页
>
专栏
>
一文将带你了解Vue中组件化通讯方式
一文将带你了解Vue中组件化通讯方式
玖柒的小窝
关注
修改于 2021-11-08 14:02:36
修改于 2021-11-08 14:02:36
284
0
举报
文章被收录于专栏:
各类技术文章~
各类技术文章~
前言
Vue提供了各种各样的通讯,其中包括
兄弟间
的通讯和
非兄弟间
的通讯以及
后代
之间的通讯,接下来就让我们一一解析吧。如果有喜欢的话可以点赞👍或者关注一下。
目标
学习Vue中的组件化通讯方式。
通讯方式
props
功能说明
父组件和子组件传递数据
目录结构 components ├── Parent.vue ├── Child.vue 复制代码
代码结构 父组件中使用子组件并传给子组件值。foo="foo" <template> <div> parent comp <Child foo="foo" /> </div> </template> <script> import Child from './child' export default { components: { Child }, } </script> 复制代码 子组件通过props接收父组件传过来的值 <template> <div> child comp {{ foo }} </div> </template> <script> export default { props: { foo: { type: String, default: '' }, }, } </script> 复制代码
emit/on
功能说明
子组件给父组件传值
目录结构 components ├── Parent.vue ├── Child.vue 复制代码
代码结构 子组件通过$emit触发父组件的方法 ,通过
回调参数
的方式进行传值 <template> <div> child comp <button @click="add">child 点击</button> </div> </template> <script> export default { methods: { add() { this.$emit('add', 'child add message') }, } } </script> 复制代码 父组件给子组件绑定一个自定义方法$on,接收回调参数。 <template> <div> parent comp <Child @add="add"/> </div> </template> <script> import Child from './child' export default { methods: { add(message) { console.log(message) // 打印child add message } }, components: { Child }, } </script> 复制代码
event bus事件总线
功能说明
Event Bus 可用于
跨组件
通知(简单项目可以使用这种方式)
实现方式
第一种直接使用Vue作用事件总线来使用 Vue.prototype.$bus = new Vue() 复制代码
第二种自定义实现 // 自定义Bus class Bus { constructor() { this.callbacks = {} } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn) } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)) } } } export default Bus 复制代码
目录结构 main.js components ├── Parent.vue ├── Goundson.vue 复制代码
代码结构 main.js Vue.prototype.$bus = new Vue() 复制代码 Goundson.vue,组件使用$emit发送addbus方法并携带参数 <template> <div> goundson comp <button @click="addBus">bus goundson click</button> </div> </template> <script> export default { methods: { addBus() { this.$bus.$emit('addbus', 'add bus message') } }, } </script> 复制代码 Parent.vue 组件使用$on接收addbus方法并接收参数 <template> <div> parent comp </div> </template> <script> export default { mounted() { this.$bus.$on('addbus', (message) => { console.log(message) // 打印add bus message }) } } </script> 复制代码
Vuex
功能说明
Vuex是一个专为Vue.js应用程序开发的状态管理库。
具体文档查询
自定义实现Vuex
$parent
功能说明
子组件可以该组件的父实例和组件
目录结构 components ├── Parent.vue ├── Child.vue 复制代码
代码结构 Parent.vue 定义参数 <template> <div> parent comp <Child /> </div> </template> <script> import Child from './child' export default { data() { return { baz: 'baz' } }, components: { Child }, } </script> 复制代码 Child.vue 使用$parent获取参数 <template> <div> child comp </div> </template> <script> export default { mounted () { console.log(this.$parent.baz); // baz } } </script> 复制代码
$children
功能说明
父组件可以该组件的子实例和组件,多个子组件的时候是无序的。
目录结构 components ├── Parent.vue ├── Child.vue 复制代码
代码结构 Child.vue 定义参数 <template> <div> child comp </div> </template> <script> export default { data() { return { bar: 'bar' } } } </script> 复制代码 Parent.vue 使用$children获取参数 <template> <div> parent comp <Child /> </div> </template> <script> import Child from './child' export default { mounted() { console.log(this.$children[0].bar) // bar }, components: { Child }, } </script> 复制代码
$root
功能说明
子组件可以访问该组件的根实例的属性和方法
目录结构 components ├── Root.vue ├── Child.vue 复制代码
代码结构 Root.vue 定义参数 <template> <div> root comp <Child /> </div> </template> <script> import Child from './child' export default { data() { return { bar: 'bar' } }, components: { Child }, } </script> 复制代码 Child.vue 使用$root获取参数 <template> <div> child comp </div> </template> <script> export default { mounted() { console.log(this.$root.bar) // bar }, } </script> 复制代码
$refs
功能说明
ref获取的是真实DOM元素,如果放到组件上就代表的是
当前组件的实例
。父组件中可以直接获取子组件的方法和数据。
目录结构 components ├── Parent.vue ├── Child.vue 复制代码
代码结构 Child.vue 定义参数和方法 <template> <div> child comp <button @click="add">child 点击</button> </div> </template> <script> import Goundson from './goundson' export default { data() { return { bar: '' } }, methods: { add() { console.log('child func') }, }, } </script> 复制代码 Parent.vue 使用ref获取参数和方法 <template> <div> parent comp <Child ref="child" /> </div> </template> <script> import Child from './child' export default { mounted() { this.$refs.child.bar = 'barrrrrrr' this.$refs.child.add() // 打印child func }, components: { Child }, } </script> 复制代码
Provide/Inject
功能说明
隔代传参,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件的层级有多深,并在其上下游关系成立的时间里始终生效。
这个方法使用之后会使结构比较混乱一般在开发项目中是不会使用,作用于封装组件库。
目录结构 components ├── Parent.vue // 父亲 ├── Child.vue // 儿子1 ├── Goundson.vue //孙子1 复制代码
代码结构 Parent.vue 使用Provide注入数据 <template> <div> parent comp <Child /> </div> </template> <script> import Child from './child' export default { provide() { return { baz: 'baz' } }, components: { Child }, } </script> 复制代码 Child.vue 放入孙子组件 <template> <div> child comp <Goundson></Goundson> </div> </template> <script> import Goundson from './goundson' export default { components: { Goundson, }, } </script> 复制代码 Goundson.vue 孙子组件使用inject 获取注入下来的数据 <template> <div> goundson comp {{ baz }} </div> </template> <script> export default { inject: ['baz'], } </script> 复制代码
$attrs
功能说明
批量向下传入属性。一般不在props定义的属性,都会放在里面。
目录结构 components ├── Parent.vue // 父亲 ├── Child.vue // 儿子 复制代码
代码结构 Parent.vue 定义参数并传递给子组件 <template> <div> parent comp <Child :foo="foo" /> </div> </template> <script> import Child from './child' export default { data() { return { foo: 'foo' } }, components: { Child }, } </script> 复制代码 Child.vue 在不定义props时使用$attrs获取参数 <template> <div> child comp {{ $attrs.foo }} </div> </template> <script> export default {} </script> 复制代码
$listeners
功能说明
批量向下传入方法,一般不在methods定义的属性,都会放在里面。
目录结构 components ├── Parent.vue // 父亲 ├── Child.vue // 儿子 ├── Goundson.vue // 孙子 复制代码
代码结构 Parent..vue 定义方法 <template> <div> parent comp <Child @some-event="onSomeEvent" /> </div> </template> <script> import Child from './child' export default { components: { Child }, } </script> 复制代码 Child.vue 做展开 <template> <div> child comp <Goundson v-on="$listeners"></Goundson> </div> </template> <script> import Goundson from './goundson' export default { components: { Goundson, }, } </script> 复制代码 Goundson.vue 触发方法 <template> <div> goundson comp <button @click="$emit('some-event', 'some event message')">点击</button> </div> </template> <script> export default {} </script> 复制代码
结语
以上就是全部内容,大部分的通讯方式多用于组件库开发中,欢迎评论指点,一起交流一起进步 🙏🙏🙏🙏。
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
vue.js
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
vue.js
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
目录
前言
目标
通讯方式
结语
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐