Vue.js组件间通信方式总结【推荐】

平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信。组件之间通信分为三种:父-子;子-父;跨级组件通信。下面,就组件间如何通信做一些总结。

1.父组件到子组件通过props通信

在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象。props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板template及计算属性computed和方法methods中使用。如以下例子:

// 父组件 ParentComponent
<template>
 <div class="parent-component">
 <h2>这是一个父组件</h2>
 <ChildComponent :parentMessage="parentMessage"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'这是来自父组件的数据'
  }
 },
 components:{
  ChildComponent
 }
 }
</script>
// 子组件 ChildComponent
<template>
<div class="child-component">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage"]
 }
</script>

小结:父组件传递个子组件的数据可以写死,也可以用父级的动态数据用v-bind来绑定props的值。

2.子组件到父组件通过$emit,$on通信

当子组件需要向父组件传递数据时,就要用到自定义事件,v-on指令除了监听DOM事件外,还可以用于组件间的自定义事件,Vue组件有一套类似与观察者模式的一套模式,子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件。举个例子如下:

// ParentComponent 父组件
<template>
 <div class="parent-component">
 <h2>这是一个父组件total:{{total}}</h2>
 <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'这是来自父组件的数据',
  total:10,
  }
 },
 components:{
  ChildComponent
 },
 methods:{
  getTotal(total){
  this.total=total;
  console.log('ParentComponent total:',total);
  }
 }
 }
</script>
// ChildComponent 子组件
<template>
<div class="child-component">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
 <button @click="handleAdd10">+10按钮</button>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage","total"],
 methods:{
  handleAdd10(){
  let total=this.total+10;
  console.log('ChildComponent $emit:');
  this.$emit('handleAdd10',total);
  }
 }
 }
</script>

结果:

上面例子中,子组件有一个按钮,实现加10的效果,子组件通过props项来接收父组件传入的total值,在改变total后,通过$emit把它传给父组件,父组件定义事件@handleAdd10方法,子组件$emit()方法第一个参数是自定义事件的名称,后面的参数是要传的数据,对应的父组件通过getTotal(total)来接收子组件传递的数据,由此子组件到父组件通信完成。

 3.表单子组件到父组件通过v-model来通信(语法糖)

// ParentComponent 改动如下
**
<h2>这是一个父组件total:{{total}}</h2>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子组件
<template>
 <input type="text" @input="updateValue($event)">
</template>
<script>
 export default {
 name: "InputComponent",
 methods:{
  updateValue(evt){
  this.$emit('input',evt.target.value)
  }
 }
 }
</script>

结果如下:

以上示例中:因为子组件的石建明是特殊的input,在使用组件的父级,可以通过v-model来绑定数据total,这种实现方式也可以称作语法糖,大大减少了父组件代码量。

4.非父子组件通过中央事件总线(bus)来通信

在vue.js2.x中推荐使用一个空的Vue实例作为中央事件总线(bus),先看一个例子:

// ParentComponent 父组件
<template>
 <div class="parent-component">
 {{message}}
 <br>
 <br>
 <component-a/>
 </div>
</template>

<script>
 import Vue from 'vue'
 let bus=new Vue();
 export default {
 name: "ParentComponent",
 data(){
  return{
  message:'',
  }
 },
 components:{
  componentA:{
  template:'<button @click="handleClick">传递事件</button>',
  methods:{
   handleClick(){
   bus.$emit('on-message','来自子组件component-a的内容')
   }
  }
  }
 },
 mounted(){
  bus.$on('on-message',(msg)=>{
  this.message=msg;
  });
 }
 }
</script>

结果如下:

以上例子中:首先创建了一个bus的空Vue实例,里面没有任何内容,然后全局定义了组件component-a,,在父组件ParentChild的生命周期mounted钩子函数中监听来自bus的事件on-message。而在组件component-a中,点击按钮会通过bus把事件on-message发出去,父组件会接受来自bus的事件,改变message的值。

这种方法巧妙轻量的实现了任何组件之间的通信,包括父子,兄弟,跨级组件。

5.状态管理与Vuex与总结

在实际业务中,经常会有跨组件共享数据的需求,如果项目不复杂,使用bus就能简单的解决问题,但是使用bus在数据的管理、维护、架构设计上还只是一个简单的组件,在大型单页应用,多然开发的项目中,Vuex能更加优雅和高效的完成状态管理。

总结

以上所述是小编给大家介绍的Vue.js组件间通信方式总结【推荐】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vue组件间通信解析

    组件间通信(父子,兄弟) 相关链接\组件通信:点击查看 学习链接:Vue.js--60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • 详解Vue2中组件间通信的解决全方案

    前言 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,下面这篇文章将给大家介绍关于Vue2组件间通信的相关内容,下面话不多说,来一起看看详细的介绍. 组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child> </templat

  • vue综合组件间的通信详解

    本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add 点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素

  • vuejs事件中心管理组件间的通信详解

    本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下 事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听 事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w

  • Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

    前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue组件间通信子与父详解(二)

    接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

  • vue2.0父子组件间通信的实现方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arra

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

随机推荐