关于vue.js:后端小伙伴来学前端了Vue中Props配合自定义方法实现组件间的通信

废话：

上篇文章写了对于 Vue 中的 props👉props，讲述了概念、根本应用及留神点，在这篇文章中，咱们也会用到 props和办法来让组件之间实现通信。

正题：

组件是 Vue 中十分重要的一个概念，也是模块化开发的根底。在应用 vue 的开发过程中，每个页面就是由多个不同的组件组合而成的。如下图：

既然有多个组件，就必须要做到数据的动态性，也要可能使多个组件之间可能通信。

组件之间的通信无疑是上面几种：

本文大抵举出案例的有

我目前只学了这些哈，继续更新中，莫慌哈。

咱们先初始化一个我的项目，之后的操作也都在这根底上进行操作，源码及相干我的项目代码都在文末仓库中。

删除些没用的，保留这些就够了。

需要：咱们须要在 HelloWorld组件中削减一个按钮，点击之后可能批改父组件传过来的值，并展现进去。

理一下思路：

那么第一步，咱们先在父组件中定义一个批改 msg 值的办法。

methods: {updateMsg () {this.msg = '大家好, 我是博主宁在春'}
}

定义好之后，咱们该如何传递给子组件呢? 从而让子组件可能调用到这个办法呢？

通过 Props，在子组件中 prop 是能够接管函数类型的。

那么咱们就能够把咱们的函数传递给子组件。

<!-- :msg 是传递给子组件的值 子组件在 props 中写什么名称，这里就写什么名称
"msg" 是咱们本人定义的变量
办法同样如此
-->
<HelloWorld :msg="msg" :updateMsg="updateMsg"/>

在这里写了之后，咱们还须要去子组件中接管一下：

这样只算是接管实现了，最初要做的就是触发他拉。咱们给按钮绑定个点击事件就能够了。

<button @click="updateMsg"> 点击批改 msg 的值 </button>

这样子其实也是能够实现的。

然而这样局限性太大，咱们平时都是要传值的，那样才算通信丫，咱们略微更改下。

在 app 组件中，咱们将要接管一个值。

methods: {updateMsg (value) {this.msg = value}
}

在子组件中更改如下图：也能够实现同样的成果

上述是实现父子组件之间通信，那么如果是兄弟组件呢? 子孙组件呢？该如何呢？

因为代码非常简单，我不再反复操作了，做了几张图，帮忙大家了解。

本文只是简略搭配应用下，并没有细讲自定义事件哈。有需要可看👉官网文档

说起来，这个 props 搭配自定义事件实现组件通信，要改变的中央蛮小哈。

1、第一步：把 App 组件中的绑定的办法名前的引号，改为 @ 符号哈。

<HelloWorld :msg="msg" @updateMsg="updateMsg"/>

2、第二步：子组件也不必再在 props 中进行接管，另外调用父组件的形式也有一点变动。

如此也是能够实现跟第一种形式同样的成果的。

如果是父子组件，这种形式我感觉十分不便，不必再借助 props 来进行接管，可间接进行绑定。

然而对于祖孙组件之间的通信，依然是很麻烦的。得先传递到子组件能力再持续传递给孙子组件

子组件

而后才是孙子组件

兄弟组件也是像之前差不多的，这种形式比拟实用于父子组件通信，比拟适合。

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主 宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿：咱们，待别日相见时，都已有所成。

组件通信形式还在写，挺多形式的，这只是最开始学的两种，重头戏还是得在后头。

前言