Vue 之 父子組件通訊與事件觸發（最全實用總結）

時間  2021-08-14
標籤 javascript html vue java 小程序 微信小程序 微信 markdown oop 欄目 JavaScript 简体版
原文   原文鏈接

以前寫過一篇關於基於 微信小程序的父子組件傳值通訊與事件觸發，今天整理一片關於 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

  1. 在父組件中，定義一個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>
複製代碼

  2. 接着在子組件裏經過 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 來觸發自定義事件並傳值，而後在父組件中監聽該事件便可。微信

  1. 在子組件中給 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>
複製代碼

  2. 在父組件中的子組件標籤裏，先在 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、父子組件事件觸發

父組件調用子組件中的事件方法

  1. 經過 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>
複製代碼

  2. 經過組件的 $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>
複製代碼

兩種實現方式效果一致。

調用方法前：在這裏插入圖片描述 調用方法後： 在這裏插入圖片描述 在這裏插入圖片描述

子組件調用父組件中的事件方法

  1. 直接在子組件中經過 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>
複製代碼

  2. 在子組件裏用 $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>
複製代碼

  3. 父組件把方法傳入子組件中，在子組件裏直接調用這個方法：

    // 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 父子組件之間大部分的操做都涉及到了，咱們在程序的開發過程當中對於該部份內容能夠遊刃有餘了。

以前還寫過一篇關於微信小程序的父子組件傳值通訊與事件觸發 的文章，感興趣的小夥伴能夠前往查看。

但願以上內容能夠幫助到你們。有任何問題歡迎討論留言。

各位 加油！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程