总结一下 vue2 组件之间的通信

start

最近在学习 vue3，在学习 vue3 的之前。先总结一下，vue2 中的组件之间的通信；

以下示例皆为 vue2

1.父组件传值给子组件，利用 props

父组件 app.vue

<template><div id="app"><boxA :name="appName" :age="appAge" /></div>
</template>

<script>
import boxA from './boxA.vue'

export default {name: 'App',data() {return {appName: '我是app页面的name',appAge: '我是app页面的age 123',}},components: {boxA,},
}
</script>

子组件 boxA.vue

<template><div class="box">我是 A盒子<pre>我有这些属性：
{{ name }}</pre></div>
</template>

<script>
export default {name: 'boxA',props: {name: {type: String, // 限制类型default: '', // 设置默认值require: true, // 是否必传},},
}
</script>

2.子组件和父组件通信 $emit

父组件 app.vue

<template><div id="app">主应用
<boxA @say="sayApp" /></div>
</template>

<script>
import boxA from './boxA.vue'

export default {name: 'App',components: {boxA,},methods: {sayApp(value) {console.log('hello', value)},},
}
</script>

子组件 boxA.vue

<template><div class="box"><span @click="handleClick">你好</span></div>
</template>

<script>
export default {name: 'boxA',methods: {handleClick() {this.$emit('say', '输出的参数')},},
}
</script>

3. 跨多级组件通信

/*新建一个Vue实例作为中央事件总线*/
let event = new Vue()

/*监听事件*/
event.$on('eventName', (val) => {//......do something
})

/*触发事件*/
event.$emit('eventName', 'this is a message.')

4.跨多级组件数据通信

vuex4.

5. 父-》子-》孙三个层级之间的组件通信 `$attrs` `$listeners`

有这么一个场景，组件 A 中有组件 B，组件 B 中有 C。AC 之间通信怎么办？

使用父子通信，B 组件中会有很多冗余代码。
使用事件总线，不太利于管理；
使用 vuex，有点大材小用；

在 vue2.4 版本之后，添加了这么几个属性：

$attrs
$listeners

`$attrs`

vm 上的属性。所以我们可以直接在组件中，this.$attrs打印出来；
2.4.0 新增的属性；
简单理解就是一个对象。所有父组件传递给子组件的值，当子组件没有用 prop 属性接收，就会存储在this.$attrs中。（class 和 style 除外）

`$listeners`

vm 上的属性。所以我们可以直接在组件中，this.$listeners打印出来；
2.4.0 新增的属性；
简单理解就是一个对象。所有父组件给子组件绑定到事件会存储在this.$listeners中，（不含 .native 修饰器的）

有什么用？

想象我们的场景：

A 组件和 C 组件通信；
A 传递数据给 B,绑定事件到 B 上。
可以在 B 中通过 this.$attrs 和 this.$listeners 拿到数据和事件
一起传递给 C 组件。

例如：

父组件 app.vue

<template><div id="app"><boxA :name="appName" :age="appAge" @fn1="appFn1" @fn2="appFn2" /></div>
</template>

<script>
import boxA from './boxA.vue'

export default {name: 'App',data() {return {appName: '我是app页面的name',appAge: '我是app页面的age 123',}},components: {boxA,},methods: {appFn1(value) {console.log('appFn1', value)},appFn2(value) {console.log('appFn2', value)},},
}
</script>

子组件 boxA.vue

<template><div class="box">我是 A盒子<pre>我有这些属性：
{{ name }}</pre>
<!-- ！！！这里可以再来一个组件  boxB; 通过 v-bind="$attrs" v-on="$listeners" 就能在boxB中收到数据了--><!-- <boxB v-bind="$attrs" v-on="$listeners"> --></div>
</template>

<script>
export default {name: 'boxA',inheritAttrs: false,props: {name: {type: String, // 限制类型default: '', // 设置默认值require: true, // 是否必传},},created() {console.log(this)this.$emit('fn1', '触发父组件第一个函数')},
}
</script>

另外说个其他的小 tips

没有被父组件传递给子组件的值，如果没有被 props 接受。默认会展示在 html 的标签上

可使用 inheritAttrs: false, 隐藏

总结一下 vue2 组件之间的通信相关推荐

VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
[vue] vue组件之间的通信都有哪些？
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
android组建之间通信_Android组件化（三）组件之间的通信
介绍在组件化开发的时候,组件之间是相互独立的没有依赖关系,我们不能在使用显示调用来跳转页面了,因为我们组件化的目的之一就是解决模块间的强依赖问题,假如现在要从A业务组件跳转到业务B组件,并且要携带参 ...
第十节：实现vue组件之间的通信
这一节我们还是来继续介绍组件:组件之间如何通信. 第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据. 父组件→子组件那我们还 ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
使用reflux进行react组件之间的通信
前言组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行父-子通信,可以直接pass props. 进行子-父通信,往父组件传给子组件的函数注入 ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...

总结一下 vue2 组件之间的通信

start

1.父组件传值给子组件，利用 props

2.子组件和父组件通信 $emit

3. 跨多级组件通信

4.跨多级组件数据通信

5. 父-》子-》孙三个层级之间的组件通信 `$attrs` `$listeners`

`$attrs`

`$listeners`

总结一下 vue2 组件之间的通信相关推荐

最新文章

热门文章

总结一下 vue2 组件之间的通信

start

1.父组件传值给子组件，利用 props

2.子组件和父组件通信 $emit

3. 跨多级组件通信

4.跨多级组件数据通信

5. 父-》子-》孙 三个层级之间的组件通信 $attrs $listeners

$attrs

$listeners

总结一下 vue2 组件之间的通信相关推荐

最新文章

热门文章

5. 父-》子-》孙三个层级之间的组件通信 `$attrs` `$listeners`

`$attrs`

`$listeners`