Vue通過(guò)ref父子組件拿值方法
更新時(shí)間：2018年09月12日 09:39:53 作者：dokill
今天小編就為大家分享一篇Vue通過(guò)ref父子組件拿值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
父拿子的值
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
</head>
<body>
<div id="box">
<v-tpl1></v-tpl1>
</div>
<template id="tpl1">
<div>
<p>{{msg1}}</p>
<!--觸發(fā)拿子組件值的函數(shù)-->
<button @click="getChild">父拿子的值</button>
<!--通過(guò)ref綁定子組件的值-->
<v-tpl2 ref="shit"></v-tpl2>
</div>
</template>
<template id="tpl2">
<p>{{msg2}}</p>
</template>
<script>
new Vue({
el: '#box',
components: {
'v-tpl1': {
template: '#tpl1',
data(){
return {
msg1: 'msg1'
}
},
methods: {
//父組件定義一個(gè)方法通過(guò)refs拿到子組件的值
getChild(){
console.log(this.$refs.shit.msg2)
}
},
components: {
'v-tpl2': {
template: '#tpl2',
data(){
return {
msg2: 'msg2'
}
}
}
}
}
}
})
</script>
</body>
</html>
子拿父的值
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
</head>
<body>
<div id="box">
<v-tpl1></v-tpl1>
</div>
<template id="tpl1">
<div>
<v-tpl2></v-tpl2>
</div>
</template>
<template id="tpl2">
<div>
<button @click="getParent">子拿父的值</button>
<p>{{msg2}}</p>
</div>
</template>
<script>
new Vue({
el: '#box',
components: {
'v-tpl1': {
template: '#tpl1',
data(){
return {
msg1: 'msg1'
}
},
components: {
'v-tpl2': {
template: '#tpl2',
data(){
return {
msg2: 'msg2'
}
},
methods:{
getParent(){
console.log(this.$parent.msg1)
}
}
}
}
}
}
})
</script>
</body>
</html>
有了ref拿值不能更方便~
以上這篇Vue通過(guò)ref父子組件拿值方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue獲取子組件實(shí)例對(duì)象ref屬性的方法推薦
- Vue父子組件數(shù)據(jù)雙向綁定（父?jìng)髯?、子傳父）及ref、$refs、is、：is的使用與區(qū)別
- vue3?setup中父組件通過(guò)Ref調(diào)用子組件的方法(實(shí)例代碼)
- 詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)
- Vue3中使用setup通過(guò)ref獲取子組件的屬性
- vue ref如何獲取子組件屬性值
- vue 父組件通過(guò)$refs獲取子組件的值和方法詳解
- vue之父子組件間通信實(shí)例講解(props、$ref、$emit)
- vue 使用ref 讓父組件調(diào)用子組件的方法
- vue如何通過(guò)ref調(diào)用router-view子組件的方法
相關(guān)文章
vue3在router中使用store報(bào)錯(cuò)的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯(cuò)解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11
在vue項(xiàng)目中添加高德地圖,對(duì)開(kāi)發(fā)地圖的開(kāi)發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了關(guān)于單文件組件.vue的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動(dòng)換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下2023-09-09
vue2前端調(diào)用WebSocket有消息進(jìn)行通知代碼示例
在Vue項(xiàng)目中實(shí)現(xiàn)全局的消息鏈接監(jiān)聽(tīng)主要涉及到了WebSocket技術(shù),這是一種雙向通信協(xié)議,允許客戶端與服務(wù)器之間實(shí)時(shí)、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2前端調(diào)用WebSocket有消息進(jìn)行通知的相關(guān)資料,需要的朋友可以參考下2024-07-07
前端vue2使用國(guó)密SM4進(jìn)行加密、解密具體方法
SM4是一種對(duì)稱(chēng)加密算法,類(lèi)似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫(kù)加密、網(wǎng)絡(luò)通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關(guān)于前端vue2使用國(guó)密SM4進(jìn)行加密、解密的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue2.0系列之過(guò)濾器的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vite的常見(jiàn)配置選項(xiàng)詳細(xì)說(shuō)明
相信大部分兄弟都體驗(yàn)過(guò)Vite了,都知道它很快,在學(xué)習(xí)的時(shí)候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見(jiàn)配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue語(yǔ)法之render函數(shù)和jsx的基本使用
這篇文章主要介紹了vue語(yǔ)法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡(jiǎn)單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08