Vue通過ref父子組件拿值方法

更新時間：2018年09月12日 09:39:53 作者：dokill

今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

父拿子的值

<!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>
  <!--通過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: {
     //父組件定義一個方法通過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通過ref父子組件拿值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3在router中使用store報錯的完美解決方案
這篇文章主要介紹了vue3在router中使用store報錯解決方案,就是需要在實例化一下,因為在編譯router的時候pinia還未被實例化,文中補充介紹了vue3中router和store詳細使用教程方法,感興趣的朋友一起看看吧
2023-11-11
vue項目中使用高德地圖的超詳細步驟
在vue項目中添加高德地圖,對開發(fā)地圖的開發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關于vue項目中使用高德地圖的超詳細步驟,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
關于單文件組件.vue的使用
這篇文章主要介紹了關于單文件組件.vue的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vue .sync修飾符的使用詳解
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-06-06
vue3中使用codemirror的詳細教程
這篇文章主要給大家介紹了關于vue3中使用codemirror的詳細教程,CodeMirror是一款功能強大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進、自動換行、獲取編輯文本、設置編輯文本、回退功能等多種實用效果,需要的朋友可以參考下
2023-09-09
vue2前端調用WebSocket有消息進行通知代碼示例
在Vue項目中實現(xiàn)全局的消息鏈接監(jiān)聽主要涉及到了WebSocket技術,這是一種雙向通信協(xié)議,允許客戶端與服務器之間實時、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關于vue2前端調用WebSocket有消息進行通知的相關資料,需要的朋友可以參考下
2024-07-07
前端vue2使用國密SM4進行加密、解密具體方法
SM4是一種對稱加密算法,類似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫加密、網(wǎng)絡通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關于前端vue2使用國密SM4進行加密、解密的相關資料,需要的朋友可以參考下
2024-07-07
Vue2.0系列之過濾器的使用
這篇文章主要介紹了Vue2.0系列之過濾器的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Vite的常見配置選項詳細說明
相信大部分兄弟都體驗過Vite了,都知道它很快,在學習的時候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關于Vite常見配置選項的相關資料,需要的朋友可以參考下
2024-09-09
vue語法之render函數(shù)和jsx的基本使用
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下
2022-08-08