vue組件父子間通信詳解（三）
更新時(shí)間：2017年11月07日 14:13:23 作者：匿名的girl
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue組件父子間通信的具體代碼，供大家參考，具體內(nèi)容如下
三、組件間通信（$parent $refs）
父組件要想獲取子組件的數(shù)據(jù)：
①在調(diào)用子組件的時(shí)候，指定ref屬性
<child-component ref="mySon"></child-component>
②根據(jù)指定的引用的名字 找到子組件的實(shí)例對(duì)象
this.$refs.mySon
子組件要想獲取父組件的數(shù)據(jù)：
①直接讀取
this.$parent
通過(guò)this.$refs拿到子組件的數(shù)據(jù)
代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>組件間通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<dahua></dahua>
</div>
<script>
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通過(guò)$refs拿到指定的所引用的對(duì)應(yīng)的組件的實(shí)例對(duì)象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
<div>
<h1>這是父組件</h1>
<button @click = "getSonName">獲取子組件數(shù)據(jù)</button>
<span>{{mySonName}}</span>
<hr>
<xiaohua ref="mySon"></xiaohua>
</div>
`
})
// 創(chuàng)建子組件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>這是子組件</h1>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
子組件通過(guò)$parent獲取父組件的數(shù)據(jù)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>組件間通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<dahua></dahua>
</div>
<script>
//創(chuàng)建子組件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
<div>
<h1>這是父組件</h1>
<hr>
<xiaohua></xiaohua>
</div>
`
})
//創(chuàng)建子組件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<div>
<h1>這是子組件</h1>
<p>{{msg}}</p>
</div>
`,
created:function(){
//在子組件創(chuàng)建完成時(shí)獲取父組件的數(shù)據(jù)
//保存在msg中在p標(biāo)簽中顯示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE項(xiàng)目去除input 框值所有空格的操作方法
這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue 3 作為前端開(kāi)發(fā)中一個(gè)非常流行的框架,在錯(cuò)誤處理方面提供了靈活和強(qiáng)大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯(cuò)誤,包括組件級(jí)的錯(cuò)誤處理、全局錯(cuò)誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下2024-07-07
vue3使用axios并封裝axios請(qǐng)求的詳細(xì)步驟
本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請(qǐng)求的詳細(xì)步驟，結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧2023-06-06
在本文里小編給大家整理的是關(guān)于vue項(xiàng)目中引入Sass的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以測(cè)試參考下。2019-08-08
vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和異步組件原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Element-UI+Vue模式使用總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索,實(shí)現(xiàn)思路很簡(jiǎn)單，通過(guò)安裝配置插件編寫工具類，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07