詳解vue組件父子間通信
本文主要為大家詳細介紹了vue組件父子間通信的相關資料，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。
三、元件間通訊（$parent $refs）
父元件要想取得子元件的資料：
①在呼叫子元件的時候，指定ref屬性
#②根據指定的引用的名字找到子元件的實例物件
this.$refs.mySon
子元件要想取得父元件的資料：
①直接讀取
this.$parent
透過this.$refs拿到子元件的資料
程式碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通过$refs拿到指定的所引用的对应的组件的实例对象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
<p>
<h1>这是父组件</h1>
<button @click = "getSonName">获取子组件数据</button>
<span>{{mySonName}}</span>
<hr>
<xiaohua ref="mySon"></xiaohua>
</p>
`
})
// 创建子组件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>这是子组件</h1>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>子元件透過$parent取得父元件的資料
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//创建子组件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<xiaohua></xiaohua>
</p>
`
})
//创建子组件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<p>
<h1>这是子组件</h1>
<p>{{msg}}</p>
</p>
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>相關推薦：
以上是詳解vue組件父子間通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
新一代光纖寬頻技術 ——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是固網
如何安裝Win10舊版元件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題，比如說卡屏和花屏等等情況，這個時候我們是可以採用打開directplay這個功能來解決的，而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了
Vue與伺服器端通訊的刨析：如何處理斷網情況
Aug 10, 2023 am 10:55 AM
Vue與伺服器端通訊的探析：處理斷網情況的策略引言：在現代Web開發中，Vue.js已成為廣泛使用的前端框架。然而，由於網路環境的不穩定性，處理斷網情況是一個需要我們考慮的重要議題。本文將分析如何在Vue中處理斷網情況，並給出對應的程式碼範例。一、斷網狀況分析在網路狀況較好的情況下，Vue可以透過Ajax請求或WebSocket與伺服器進行通訊。但是，
如何透過PHP與P2P協定實現點對點通訊
Jul 28, 2023 pm 10:13 PM
如何透過PHP與P2P協定實現點對點通訊隨著網際網路的發展，點對點（peer-to-peer，簡稱P2P）通訊逐漸成為重要的通訊方式。與傳統的客戶端-伺服器通訊方式相比，P2P通訊具有更好的穩定性和伸縮性。在本文中，我們將介紹如何使用PHP與P2P協定實現點對點通信，並提供相應的程式碼範例。首先，我們需要了解P2P通訊的基本原理。 P2P協定允許多台電腦直接
寬頻上網技術簡史
Apr 16, 2024 am 09:00 AM
在現今這個數位時代，寬頻已經成為我們每個人、每個家庭的生活必需品。如果沒有它，我們會坐立難安、心緒不寧。那麼，你知道寬頻背後的技術原理嗎？從最早期的56k「貓」撥號，到現在的千兆城市、千兆家庭，我們的寬頻科技到底經歷了怎樣的改變？今天這篇文章，我們就來詳細了解一下—「寬頻的故事」。 █xDSL和ISDN下面這個介面，你看過嗎？我相信很多70後80後的小夥伴，肯定見過，非常熟悉。沒錯，這就是當年我們最初接觸網路時，進行「撥接上網」的介面。那還是20多年前，小棗君還在上大學的時候。為了上網，我
Angular元件及其顯示屬性：了解非block預設值
Mar 15, 2024 pm 04:51 PM
Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝，並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display，Angular組件的顯示可以完全控制，從而實現所需的佈局和響應能力。
無線滑鼠的發展史
Jun 12, 2024 pm 08:52 PM
原文標題：《無線滑鼠到底是怎麼做到無線的？ 》無線滑鼠慢慢成了現在辦公電腦的標配，從此再也不用拖著長長的線跑來跑去了。可是，無線滑鼠是怎麼運作的呢？今天我們一起來學習No.1無線滑鼠的發展史你知道嗎，無線滑鼠現在也已經40歲了，1984年的時候，羅技研製了世界上第一款無線滑鼠，不過這個無線滑鼠採用紅外線作為訊號的載體，據說長得像下面圖片這個樣子，後面因為效能原因而宣告失敗。直到十年後的1994年，羅技終於研發成功了一個工作在27MHz的無線滑鼠，這個27MHz頻率也成了很長一段時間內，無線滑鼠
如何開啟win10舊版組件的設置
Dec 22, 2023 am 08:45 AM
win10舊版元件是需要使用者自己去設定裡面打開的，因為很多的元件平時都是預設關閉的狀態，首先我們需要進入到設定裡面，操作很簡單，跟著下面的步驟來就可以了win10舊版元件在哪裡開啟1、點選開始，然後點選「win系統」2、點選進入控制台3、再點選下面的程式4、點選「啟用或關閉win功能」5、在這裡就可以選擇你要的開啟了
