简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Vue中$refs的用法

不言
發布： 2018-06-25 15:09:48
原創
2244 人瀏覽過

這篇文章主要介紹了Vue中$refs的用法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

說明：vm.$refs 一個對象，持有已註冊過ref 的所有子元件（或HTML元素）

使用：在HTML元素中，新增ref屬性，然後在JS中透過vm.$refs.屬性來取得

##注意：如果取得的是一個子元件，那麼透過ref就能取得到子元件中的data和methods

#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <p id="vue_app">
    <qinwm ref="vue_qinwm"></qinwm>
    <p ref="vue_p">Hello, world!</p>
    <button @click="getRef">getRef</button>
  </p>
</body>
</html>
<script>
  Vue.component("qinwm", {
    template: `<h1>{{msg}}</h1>`,
    data(){
      return {
        msg: "Hello, world!"
      };
    },
    methods:{
      func:function (){
        console.log("Func!");
      }
    }
  });
  new Vue({
    el: "#vue_app",
    data(){
      return {};
    },
    methods: {
      getRef () {
        console.log(this.$refs);
        console.log(this.$refs.vue_p); // <p>Hello, world!</p>
        console.log(this.$refs.vue_qinwm.msg); // Hello, world!
        console.log(this.$refs.vue_qinwm.func); // func:function (){ console.log("Func!"); }
        this.$refs.vue_qinwm.func(); // Func!
      }
    }
  });
</script>
登入後複製

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue-cli和webpack記事本專案建立

##關於vue和vue-validator 表單驗證函數的實作


#

以上是Vue中$refs的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
vue
來源：php.cn
上一篇：jQuery實作滑動頁面固定頂部顯示的功能 下一篇：jQuery和CSS3折疊卡片式下拉列錶框實現效果
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用MySQL SQL查詢計算另一張表中欄位的總和 我有一個這樣的模式：具有屬性“user_id”和“username”的用戶表以及具有屬性“customer_id”（user_id的FK）和“finalPrice”的訂單表資料庫架...
來自於 2024-04-06 19:39:29
0
1
441
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
放大 d3.js 時散佈圖點不會保持值 這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...
來自於 2024-04-06 18:16:26
0
1
403
在模板中使用方法中定義的變數 這是我第一次使用Vue（v2而不是v3），我一直在嘗試在模板內使用變數（在方法內定義）。我的簡化程式碼：<template><divclass="con...
來自於 2024-04-06 18:10:25
0
2
513
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！