vue之使用ref獲取DOM元素和組件引用

本文轉載自查看原文 2021-04-25 22:20 214 vue

說明： vm.$refs 是一個對象，擁有已注冊過 ref 的所有元素(或者子組件)
使用：在HTML元素中，添加ref屬性，然后在JS中通過vm.$refs.屬性來獲取
注意：如果獲取的是一個子組件，通過 ref 就能獲取到子組件中的 data 和 methods

添加 ref 屬性

 <div id='app'>
        <input type="button" value="獲取元素" @click="getElement" ref="mybtn">
        <h3 ref="myh3">哈哈哈哈哈</h3>
        <hr>
        <login ref="mylogin"></login>
 </div>

在控制台輸出，vm實例身上的屬性，如圖：這里就是所有注冊過 ref 的元素

調用子組件的引用

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>ref獲取DOM元素和組件的引用</title>
    <script src='../lib/vue.js'></script>
</head>

<body>
    <div id='app'>
        <input type="button" value="獲取元素" @click="getElement" ref="mybtn">
        <h3 ref="myh3">哈哈哈哈哈</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>
    
    <script>
        var login = {
            template: '<h1>登錄組件</h1>',
            data() {
                return {
                    msg: 'son msg'
                }
            },
            methods: {
                show() {
                    console.log('調用了子組件的方法')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getElement() {
                    // ref 是英文單詞 【reference】 值類型 和 引用類型 (referenceError 引用錯誤)
                    
                    console.log(this.$refs.myh3.innerText); //獲取h3的文本內容
                    console.log(this.$refs.mylogin.msg); //調用子組件的數據
                    this.$refs.mylogin.show(); //調用子組件的方法
                }
            },
            components: {
                login: login
            }
        })
    </script>
</body>

</html>

點擊按鈕，所得結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue系列之 => ref獲取DOM元素和組件 Vue_使用ref獲取DOM元素 vue3 使用ref獲取Dom元素 ref 獲取DOM元素和組件 vue 父組件獲取子組件dom元素 ref $refs Vue 獲取DOM元素ref Vue 通過ref獲取DOM元素 Vue ref 獲取DOM元素 vue操作dom元素和vue組件（ref） vue-使用ref屬性獲取和操作dom元素