實例詳解vue組件間通訊子與父詳解（二）-js教程-PHP中文網

首頁

web前端

js教程

實例詳解vue組件間通訊子與父詳解（二）

小云云

Dec 26, 2017 pm 01:20 PM

組件詳解溝通

接著vue組件父與子通訊詳解繼續學習。本文主要為大家詳細介紹了vue組件間通信子與父的相關資料，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

二、元件間通訊（子元件傳遞值給父元件）

透過事件的方式來完成資料的傳輸。

①在父元件中定義一個方法，用來接收子元件所透過事件傳來的值

methods:{
　　recvMsg:function(msg){
　　//参数msg就是子组件通过事件出来的数据
　　}
}

登入後複製

②綁定事件處理函數

事件一般情況都是自訂事件

<child-component @myEvent="recvMsg"></child-component>

登入後複製

③在子元件觸發事件

　　　　　　事件名，值
this.$emit(&#39;myEvent&#39;,myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

登入後複製

總結：

在Vue 中，父子元件的關係可以總結為props down, events up。父元件透過 props 向下傳遞資料給子元件，子元件透過 events 傳送訊息給父元件。

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信子传父</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
    //通过事件的方式传递
    //  绑定 -- 触发
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg参数要拿子传递的值          
        recvMsg:function(msg){
          console.log("父组件接收到子组件的数据"+msg);
          this.sonMsg = msg;

        }
      },
      template:`
        <p>
          <h1>这是父组件</h1>
          <p>子组件传来的数据为：{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //来触发绑定给子组件的自定义方法
          //this.$emit("customEvent");第一个参数触发
          //this.$emit("customEvent");第二个参数传值
          this.$emit("customEvent","哈哈哈哈");
        },
      },
      template:`
        <p>
          <h1>这是子组件</h1>
          <button @click="sendMsg">senToFather</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

登入後複製

在子元件中放一個input，點選按鈕把使用者輸入的內容發給父元件

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>子与父之间的通信</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
  //创建父组件
    Vue.component("parent-component",{
    //data属性
      data:function(){
        return{
          sonMsg:""
        }
      },
      methods:{
        recvMsg:function(msg){
          this.sonMsg = msg
        }
      },
      template:`
        <p>
          <h1>父组件</h1>
          <h4>子组件传递的数据：{{sonMsg}}</h4>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    //创建子组件
    Vue.component("child-component",{
      data:function(){
        return {
          myInput:""
        }
      },
      methods:{
        sendMsg:function(){
          this.$emit("customEvent",this.myInput);
        }
      },
      template:`
        <p>
          <h1>子组件</h1>
          <input type="text" v-model="myInput"/>
          <button @click="sendMsg">发送</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

登入後複製

熱AI工具

熱工具

熱門話題

Java教學

1662

CakePHP 教程

1418

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

Related knowledge

新一代光纖寬頻技術 ——50G PON Apr 20, 2024 pm 09:22 PM

上篇文章（連結），小棗君向大家介紹了寬頻技術從ISDN、xDSL到10GPON的發展歷程。今天，我們來聊聊即將到來的新一代光纖寬頻技術—50GPON。 █F5G和F5G-A介紹50GPON之前，先來談談F5G和F5G-A。 2020年2月，ETSI（歐洲電信標準化協會）推進了一套以10GPON+FTTR、Wi-Fi6、200G光傳送/匯聚、OXC等技術為基礎的固定通訊網路技術體系，並將其命名為F5G，也就是第五代固網通訊技術（The5thgenerationFixednetworks）。 F5G是固網

Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

寬頻上網技術簡史 Apr 16, 2024 am 09:00 AM

在現今這個數位時代，寬頻已經成為我們每個人、每個家庭的生活必需品。如果沒有它，我們會坐立難安、心緒不寧。那麼，你知道寬頻背後的技術原理嗎？從最早期的56k「貓」撥號，到現在的千兆城市、千兆家庭，我們的寬頻科技到底經歷了怎樣的改變？今天這篇文章，我們就來詳細了解一下—「寬頻的故事」。 █xDSL和ISDN下面這個介面，你看過嗎？我相信很多70後80後的小夥伴，肯定見過，非常熟悉。沒錯，這就是當年我們最初接觸網路時，進行「撥接上網」的介面。那還是20多年前，小棗君還在上大學的時候。為了上網，我

linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

PHP實作Socket通訊的方法與技巧 Mar 07, 2024 pm 02:06 PM

PHP是一種常用的開發語言，可以用來開發各種網頁應用程式。除了常見的HTTP請求和回應以外，PHP也支援透過Socket進行網路通信，實現更靈活和高效的資料互動。本文將介紹PHP如何實作Socket通訊的方法與技巧，並附上具體的程式碼範例。什麼是Socket通訊Socket是一種在網路中進行通訊的方法，可以在不同的電腦之間傳輸資料。透過S

無線滑鼠的發展史 Jun 12, 2024 pm 08:52 PM

原文標題：《無線滑鼠到底是怎麼做到無線的？》無線滑鼠慢慢成了現在辦公電腦的標配，從此再也不用拖著長長的線跑來跑去了。可是，無線滑鼠是怎麼運作的呢？今天我們一起來學習No.1無線滑鼠的發展史你知道嗎，無線滑鼠現在也已經40歲了，1984年的時候，羅技研製了世界上第一款無線滑鼠，不過這個無線滑鼠採用紅外線作為訊號的載體，據說長得像下面圖片這個樣子，後面因為效能原因而宣告失敗。直到十年後的1994年，羅技終於研發成功了一個工作在27MHz的無線滑鼠，這個27MHz頻率也成了很長一段時間內，無線滑鼠

PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模

See all articles

實例詳解vue組件間通訊子與父詳解（二）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題