引言

Vue的两大特性：响应式和组件化。当项目体积和工程量开发到比较大的时候，一个vue文件有几千行代码的时候，这样是不利于开发和维护的，我们经常做的是抽离组件，而谈论组件，不得不考虑组件之间是如何传值的，今天我们就来探讨一下组件之间是如何传递数据的。

1、父组件向子组件通过props传递数据，子组件通过$emit（派发事件的方式）给修改父组件的数据，进而修改子组件数据

// 父组件
<template><div><div >{{title}}</div>// 注意 .sync可以帮我们实现父组件向子组件传递的数据的双向绑定<Item:title.sync="title":pay-type="payType"@updateMsg="handleUpdate"></Item></div>
</template>
<script>
import Item from './components/Son.vue';
export default {components: {Item},data () {return {title: '我是父组件',payType: 'tested',};},methods: {handleUpdate (val) {this.payType = val;}}
};
</script>

// 子组件
<template><div><div>{{payType}}</div><el-button @click="handleClick">点我</el-button><el-button @click="handleClick2">再点</el-button><div>{{title}}</div></div>
</template>
<script>
export default {props: {title: {type: String,default: ''},payType: {type: String,default: ''}},methods: {handleClick () {this.$emit('updateMsg', 'testing');},handleClick2 () {// 子组件是可以通过update直接去修改父组件的值的，这里不同于this.$emit触发一个方法通过修改父组件的数据进而修改子组件的数据，这里好好思考一下哦this.$emit('update:title', '好像是能改变的');}}
};
</script>

如果是兄弟组件需要穿插数据呢？
或许有人会问了，为啥不用uex呢？首先我要声明的是Vuex可以实现组件传值，但是当组件多层嵌套时传值会变得很麻烦和繁琐，从最底层的子组件传值至最上层的父组件（或者反过来）可能会跨越好几层组件。

2、EventBus

EventBus 是中央事件总线，父子组件，兄弟组件，爷孙级组件等都可以利用其完成数据传递，也叫全局事件，我们在项目中经常会用得到的，千万不要局限于兄弟组件之间，切记！！！

// eventBus.js
import Vue from 'vue';
export default new Vue;

<template><div><Item></Item><Brother></Brother></div>
</template>
<script>
import Item from './components/Son.vue';
import Brother from './components/Brother.vue';
export default {components: {Item, Brother},
};
</script>

// brother组件
<template><div><h3>{{message}}</h3></div>
</template>
<script>
import bus from '@/utils/eventBus.js';
export default {name: 'Brother',data () {return {message: '这是兄弟组件的message值'};},mounted () {bus.$on('update', (res) => {this.message = res;});},
};
</script>

// son组件
<template><div><el-button type="primary" @click="handleClick">修改</el-button></div>
</template>
<script>
import bus from '@/utils/eventBus.js';
export default {methods: {handleClick () {bus.$emit('update', '我是son组件修改Brother的message值');}}
};
</script>

3、$attrs / $listeners（多层嵌套组件传递数据或者方法）

// parent组件
<template><div>// 注意：不仅可以向后代组件传递数据，还可以传递方法<Item :message="msg" :click-function="clickFunction"></Item></div>
</template>
<script>
import Item from './components/Son.vue';
export default {components: {Item},data () {return {msg: 'parent组件的数据'};},methods: {clickFunction () {return '返回个啥呢';},}
};
</script>

// 子组件
<template><div>// $props监听数据，$listeners监听方法<Child v-bind="$props" v-on="$listeners" /></div>
</template>
<script>
import Child from './Child.vue';
export default {components: {Child},// 注意：这里的props声明什么，就可以传递给后代组件什么props: {message: {type: String,default: ''},clickFunction: {type: Function,default: () => {}}}
};
</script>

// 孙子组件
<template><div>{{message}}<el-button @click="handleClick">点击</el-button></div>
</template>
<script>export default {props: {message: {type: String,default: ''},clickFunction: {type: Function,default: () => {}}},methods: {handleClick () {let res = this.clickFunction();console.log(res);}}
};
</script>

4、provide / inject

provide/inject 是依赖注入，需要一起使用，可以让我们指定想要提供给后代组件的数据或方法。不论组件嵌套有多深，允许一个祖先组件向其所有子孙后代注入一个依赖，并在起上下游关系成立的时间里始终生效。

// parent组件
<template><div><Item></Item></div>
</template>
<script>
import Item from './components/Son.vue';
export default {components: {Item},data () {return {msg: 'parent组件的数据'};},provide () {return {name: this.msg,queryData: this.queryData()};},methods: {queryData () {return {name: '尼玛',age: 29,money: '$100'};},}
};
</script>

// 子组件
<template><div><Child /></div>
</template>
<script>
import Child from './Child.vue';
export default {components: {Child},
};
</script>

// 孙子组件
<template><div>{{name}}<el-button @click="handleClick">点击</el-button></div>
</template>
<script>export default {inject: ['name', 'queryData'],methods: {handleClick () {let res = this.queryData;console.log(res);}}
};
</script>

以上就是项目中组件通信常用的几种方式，你学会了吗

Vue组件传值的几种常用方式相关推荐

【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
vue组件传值的12种方式
Vue组件间的12种传值方式当做到比较大的项目时,一个vue文件里面可能要包含上千行代码,这样不利于后期维护与问题定位,抽离成组件就尤其重要了,我在项目中遇到组件的值如何传递的问题,刚开始接触的时候 ...
Vue组件传值（8种传值方式）值得收藏！
前言: vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方 ...
vue组件传值的八种方式
1. 父传子首先在使用子组件的标签上通过自定义属性传递变量在子组件中通过 props 接受在接收的时候有两种接收方式数组形式和对象形式对象形式可以规定传来的变量的数据类型(type)默 ...
Vue组件传值的若干种方式
01 父传子 props:props可以是数组或对象,用于接收来自父组件通过v-bind传递的数据.当props为数组时,直接接收父组件传递的属性:当 props 为对象时,可以通过type.defa ...
vue组件间通信三种基本方式
1. 父传子父组件代码 <template><son :msg="message">& ...
vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...

Vue组件传值的几种常用方式

引言

1、父组件向子组件通过props传递数据，子组件通过$emit（派发事件的方式）给修改父组件的数据，进而修改子组件数据

2、EventBus

3、$attrs / $listeners（多层嵌套组件传递数据或者方法）

4、provide / inject

Vue组件传值的几种常用方式相关推荐

最新文章

热门文章