Vue 父子组件通讯

做者：小土豆biubiubiu

博客园：www.cnblogs.com/HouJiao/

掘金：juejin.im/user/58c61b…

简书：www.jianshu.com/u/cb1c3884e…

微信公众号：土豆妈的碎碎念（扫码关注，一块儿吸猫，一块儿听故事，一块儿学习前端技术）

码字不易，点赞鼓励哟~

父子组件的关系构成

本篇文章将要总结的是Vue中父子组件之间的通讯方式。

那在vue中父子组件之间的关系是怎么构成的呢，或者说哪一个组件能够称为是父组件，哪一个组件又能够称为是子组件呢。

在个人理解中，父子组件的关系构成也比较简单。

使用vue-cli工具构建的项目中，咱们常常会在一个组件中注册引用另一个组件。

Home.vue

<template>
  <div class="home">
    <p>这里是Home组件</p>
  </div>
</template>
<script> export default { name: 'Home' } </script>
<style scoped> .home{ border:1px solid #4488ff; display: inline-block; padding: 10px; } </style>
复制代码

App.vue

<template>
  <div id="app">
    <p>这里是app组件</p>
    <!-- stpe3:使用 -->
    <home></home>
  </div>
</template>

<script> // step1: 引入 import Home from './components/Home' export default { name: 'App', // step2: 注册 components: { Home } } </script>

<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; display: inline-block; border:1px solid orange; padding: 10px; } </style>
复制代码

在上面两个组件中，咱们在App组件中引入、注册并使用了Home组件。

那在vue中，咱们就能够称App组件为父组件，Home组件为子组件，这两个组件就构成了父子关系。

这里必定要注意的是引入、注册、使用这三步都不可缺乏。不然这两个组件没法构成父子关系，也没法使用后面总结的几种通讯方式进行通讯。

了解了vue中父子组件的构成关系后，接下来我将为你们介绍父子组件以前是如何进行通讯。

props

vue中父子组件通讯的第一种方式是经过props属性，而且是父组件向子组件通讯。

下面咱们来实践操做一下。

首先找到父组件中使用子组件的地方，为其添加上父组件须要传递给子组件的数据。

App.vue（省略部分未修改代码）

<template>
  <div id="app">
    <p>这里是app组件</p>
    <home title="Vue中父子组件之间的通讯方式" date="2020/03/05 14:25">
    </home>
  </div>
</template>
复制代码

能够看到，这一步咱们在使用子组件的地方添加了两个须要传递给子组件的数据：title和date。

<home title="Vue中父子组件之间的通讯方式" date="2020/03/05 14:25">
</home>
复制代码

下一步就是在子组件使用props接收这两个参数。

Home.vue（省略部分未修改代码）

<script> export default { name: 'Home', props: ['title','date'] } </script>
复制代码

最后一步，咱们就能够在子组件中像使用vue data同样使用title和date了。

Home.vue（省略部分未修改代码）

<template>
  <div class="home">
    <p>这里是Home组件</p>
    <p>title:{{title}}</p>
    <p>date:{{date}}</p>
  </div>
</template>
复制代码

启动项目后，浏览器查看效果。

更多关于props的用法请 点击这里。

$emit

vue中父子组件通讯的第二种方式是经过$emit方法，它是属于子组件向父组件通讯。

$emit方法是vue的一个实例方法，它的用法以下：

其中第一个参数eventName称为事件名称。

事件名称对应的事件是在父组件中经过v-on监听的一个native DOM事件（能够理解是一个相似click这样的自定义事件）。

当咱们在子组件中执行$emit(eventName)时，就会触发父组件中对应的event。

因此首先咱们在子组件中使用$emit方法去编写代码（不传递第二个参数），触发父组件中的event。

Home.vue

<template>
  <div class="home">
    <p>这里是Home组件</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script> export default { name: 'Home', methods: { btnClickHandler: function(param){ if(param == "Yes"){ this.$emit('sayYes'); }else if(param == "No"){ this.$emit('sayNo'); } } } } </script>
复制代码

能够看到，在Home子组件中存在两个button。

当点击`[Yes] button`时，会执行`this.$emit('sayYes')`，触发父组件中的`sayYes`事件。

当点击`[No] button`时，会执行`this.$emit('sayNo')`，触发父组件中的`sayNo`事件。
复制代码

接着咱们在父组件中实现对应的native DOM事件。

App.vue

<template>
  <div id="app">
    <p>这里是app组件</p>
    <home v-on:sayYes='val="yes"' v-on:sayNo='val="no"'>
    </home>
    <p>val: {{val}}</p>
  </div>
</template>

<script> import Home from './components/Home' export default { name: 'App', data() { return { val: "default", } }, components: { Home }, } </script>
复制代码

其中sayYes和、sayNo就是在父组件中定义的native DOM事件。

<home v-on:sayYes='val="yes"' v-on:sayNo='val="no"'>
</home>
复制代码

val是父组件中定义的一个data数据，默认值为'default'。

那在结合子组件的代码逻辑，咱们知道会有以下的结果：

当点击[Yes] button时，会执行this.$emit('sayYes')，触发父组件中的sayYes事件，在sayYes事件里会将vue data中的val值修改成yes。  

当点击[No]button时，会执行this.$emit('sayNo')，触发父组件中的sayNo事件，在sayNo事件里会将vue data中的val值修改成no。
复制代码

浏览器中验证一下咱们的说法。

$parent

$parent是vue的一个实例属性，它表示的就是当前组件的父实例。

假如父组件中有一个方法为 sayYes，那么在子组件中就能够直接使用 this.$parent.sayYes去调用父组件的方法。

App.vue

<template>
  <div id="app">
    <p>这里是app组件</p>
    <home></home>
    <p>val: {{val}}</p>
  </div>
</template>

<script> import Home from './components/Home' export default { name: 'App', data() { return { val: "default", } }, components: { Home }, methods: { sayYes: function() { this.val = "yes"; }, sayNo: function() { this.val = "no"; } } } </script>
复制代码

咱们在父组件中定义了两个method：sayYes和sayNo，逻辑分别是：将val的值改成yes；将val的值改成no。

接着就能够在子组件中使用this.$parent.sayYes和this.$parent.sayNo去调用父组件中对应的sayYes和sayNo方法了。

Home.vue

<template>
  <div class="home">
    <p>这里是Home组件</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script> export default { name: 'Home', methods: { btnClickHandler: function(param){ if(param == "Yes"){ this.$parent.sayYes(); }else if(param == "No"){ this.$parent.sayNo(); } } } } </script>
复制代码

子组件中btnClickHandler方法的代码已经改成了this.$parent这种写法。

那咱们在看下结果。

总结

到此，vue中父子组件的通讯方式已经总结完毕了，分别总结了下面几种方法:

第一种：父组件向子组件通讯-props属性  

第二种：子组件向父组件通讯-$emit方法  

第三种：子组件向父组件通讯-$parent属性   
复制代码

做者：小土豆biubiubiu

博客园：www.cnblogs.com/HouJiao/

掘金：juejin.im/user/58c61b…

简书：www.jianshu.com/u/cb1c3884e…

微信公众号：土豆妈的碎碎念（扫码关注，一块儿吸猫，一块儿听故事，一块儿学习前端技术）

码字不易，点赞鼓励哟~