Vue 之父子组件通讯与事件触发（最全实用总结）

以前写过一篇关于基于微信小程序的父子组件传值通讯与事件触发，今天整理一片关于 Vue 的父子组件的相关内容。javascript

1、组件

子组件

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>子组件接收父组件的值:</div>
  </div>
</template> 
复制代码

父组件

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:</div>
    <Child></Child>
  </div>
</template>

<script> import Child from './Child'; export default { components: { Child } } </script>
复制代码

效果展现：经过这张图能够看出父子组件的结构，下面咱们来实习父子组件通讯。html

2、父子组件通讯

父组件给子组件通讯

实现思路：子组件经过 props 来接受父组件传过来的值。vue

在父组件中，定义一个data变量，在子组件标签中动态绑定这个值。java

// Father.vue
<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data"></Child>
  </div>
</template>

<script> import Child from './Child'; export default { data() { return { data: 'I am your father', } }, components: { Child } } </script>
复制代码

接着在子组件里经过 props 来接收，这样子组件就接收到了父组件传递过来的值了。小程序

// Child.vue
<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>父组件向子组件传递的值:{{FatherMsg}}</div>
  </div>
</template> 

<script> export default { data() { return { data: 'I am your children', } }, props: ['FatherMsg'] } </script>
复制代码

能够看到，咱们父组件向子组件通讯已经实现了，接下来就是子组件向父组件通讯了，这个就要使用到 this.$emit 方法了。微信小程序

子组件向父组件通讯

实现思路：经过在子组件中使用 this.$emit 来触发自定义事件并传值，而后在父组件中监听该事件便可。微信

在子组件中给 button 按钮添加 click 事件，来经过 this.$emit 自定义事件，并传入一个参数：markdown

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button @click="send">子组件将值传递给父组件</button>
    <div>父组件向子组件传递的值:{{FatherMsg}}</div>
  </div>
</template> 

<script> export default { data() { return { data: 'I am your children', } }, props: ['FatherMsg'], methods: { send() { this.$emit('ListenChild', this.data); } } } </script>
复制代码

在父组件中的子组件标签里，先在 data 里定义一个变量接收这个值，而后监听在子组件中自定义的事件，并接受这个参数赋值给定义的变量：oop

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
  </div>
</template>

<script> import Child from './Child'; export default { data() { return { data: 'I am your father', ChildMsg: '', } }, components: { Child }, methods: { ListenChild(data) { console.log("子组件传递过来的值：" , data); this.ChildMsg = data; } } } </script>
复制代码

点击子组件中的“子组件将值传递给父组件”，就可看到以下效果： ui

3、父子组件事件触发

父组件调用子组件中的事件方法

经过 ref 直接调用子组件的方法：

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script> export default { data() { return { msg: '', } }, methods: { childFun() { console.log('我是子组件的方法 childFun'); this.msg = '个人方法被调用了' }, }, }; </script>
复制代码

在子组件标签上添加 ref 属性，而后在方法中经过 this.$refs 找到绑定 ref 的属性调用该子组件内的方法便可。

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父组件
    <Button @click="handleClick">点击调用子组件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script> import Child from './Child'; export default { components: { Child }, methods: { handleClick() { this.$refs.child.childFun(); }, }, } </script>
复制代码

经过组件的 $emit、$on 方法：

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script> export default { data() { return { msg: '', } }, mounted() { this.$on('childFun', function() { console.log('我是子组件方法'); this.msg = '个人方法被调用了' }); } }; </script>
复制代码

在子组件中使用 $on 绑定一个方法，而后在父组件中经过 $emit 找到绑定 $on 上面的事件名便可，可是也须要 ref 的配合。

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父组件
    <Button @click="handleClick">点击调用子组件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script> import Child from './Child'; export default { components: { Child }, methods: { handleClick() { //子组件$on中的名字 this.$refs.child.$emit("childFun") }, }, } </script>
复制代码

两种实现方式效果一致。

调用方法前：调用方法后：

子组件调用父组件中的事件方法

直接在子组件中经过 this.$parent 来调用父组件的方法

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script> import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('个人父组件中的方法'); this.msg = '个人方法被子组件调用了'; } } }; </script>
复制代码

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script> export default { methods: { childMethod() { this.$parent.fatherMethod(); } } }; </script>
复制代码

在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件（推荐使用）

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child @fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script> import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('个人父组件中的方法'); this.msg = '个人方法被子组件调用了'; } } }; </script>
复制代码

子组件可使用 $emit 触发父组件的自定义事件。

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script> export default { methods: { childMethod() { // fatherMethod父组件方法 this.$emit('fatherMethod'); } } }; </script>
复制代码

父组件把方法传入子组件中，在子组件里直接调用这个方法：

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child :fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script> import Child from './Child'; export default { data() { return { msg: '' } }, components: { Child }, methods: { fatherMethod() { console.log('个人父组件中的方法'); this.msg = '个人方法被子组件调用了'; } } }; </script>
复制代码

父组件能够将事件绑定到子组件标签上，子组件使用 props 接收父组件的事件。

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script> export default { props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod(); } } } }; </script>
复制代码

以上三种实现方式效果一致。

调用方法前：调用方法后：

4、总结

至此，Vue 父子组件之间大部分的操做都涉及到了，咱们在程序的开发过程当中对于该部份内容能够游刃有余了。

以前还写过一篇关于微信小程序的父子组件传值通讯与事件触发的文章，感兴趣的小伙伴能够前往查看。

但愿以上内容能够帮助到你们。有任何问题欢迎讨论留言。

各位加油！

Vue 之 父子组件通讯与事件触发（最全实用总结）