vue.js踩坑之ref參照細節點講解

2022-03-31 19:00:17

ref參照細節點講解

vue.js元件之H5頁面，DOM標籤或者元件中，通過ref="自定義name名稱"參照的細節點

要點簡介：[ 見下文案例 ]

使用is=" "解決H5出現的標籤解析bug 。
子元件中使用data，data必須是一個函數！
DOM標籤中，參照ref定義的name：獲得的是該DOM元素；如下文的： this.$refs.hello.innerHtml
元件中，參照ref：獲得的是該DOM物件。如下文的： this.$refs.name2.number

vue不建議我們在程式碼裡面操作DOM，但是，在處理一些極其複雜的動畫效果，不操作DOM，單單靠vue的資料繫結是無法完成實際需求的效果的。這就需要我們必須操作DOM。如何操作呢？

通過ref參照的形式,來操作DOM

下面我們給一個需求：當點選div的時候，div裡面的內容被列印出來。

步驟如下

1.首先起一個參照的名字，比如hello：

ref='hello'

通過參照名稱拿到該ref對應DOM裡面的內容。

重要程式碼如下

<body>
    <div id="app">
        <div 
            ref="hello"
            @click="handleClick"
        >
            hello , 通過ref命名參照 操作DOM元素 !
        </div>
    </div>
        <script>
        var app = new Vue({
          el: '#app',
          methods: {
              handleClick: function() {                          alert(this.$refs.hello.innerHTML);
              }
          }
        })
    </script>
</body>

注意：this.$refs指頁面所有參照。

2.如果是參照元件呢？

我們先看一段程式碼：

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
    </div>
        
    <script>
        Vue.component('counter', {
            template: '<button @click="handleClick">{{number}}</button>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                  handleClick: function() {                              
                      this.number ++;
                  }
            }
        })
        var app = new Vue({
          el: '#app',
        })
    </script>
</body>

下面我們再給一個需求：數位的求和運算。

全部程式碼如下：

<body>
    <div id="app">
        <counter ref="name2" @change="handleChange"></counter>
        <counter ref="name3" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
        
    <script>
        //子元件
        Vue.component('counter', {
            template: '<button @click="handleClick">{{number}}</button>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                  handleClick: function() {                              
                      this.number ++;
                      this.$emit('change')//父元件中監聽變化
                  }
            }
        })
        
        //父元件
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() { 
                    console.log(this.$refs.name2.number);
                    console.log(this.$refs.name3.number);
                    this.total = this.$refs.name2.number +　this.$refs.name3.number;
                }
            }
        })
    </script>
</body>

注意：

this.$refs.name2是個物件！

這裡使用了父子通訊$emit()，不懂沒關係，可以翻典籍或檢視對應的講解部落格。

ref參照及插槽

ref參照

ref被用來給元素或子元件註冊參照資訊。參照資訊將會註冊在父元件的$refs物件上。如果在普通的DOM元素上使用，參照指向的就是DOM元素；如果用在子元件上，參照就指向元件範例。（可用於存取子元件範例或子元素）

<p ref='p'>hello</p>
<child-component ref='child'></child-component>

當v-for用於元素或元件的時候，參照的資訊將是包含DOM節點或元件範例的陣列。

注意：因為ref本身是作為渲染結果被建立的，在初始渲染的時候你還不能存取它們，因為它們還不存在。

ref參照DOM元素

參照ref參照頁面上的DOM元素：

點選按鈕後效果如圖：

ref參照元件範例

要使用 ref 參照頁面上的元件範例：父元件存取子元件範例

RefCom1元件：

子元件RefCom2：

實現效果：

實現標籤的按需切換

通過布林值 inputVisible 來控制元件中的文字方塊與按鈕的按需切換，希望文字方塊顯示出來後立即獲得焦點。

補充： this.$nextTick(cb)方法

元件的$nextTick(callback)方法，會把callback回撥函數推遲到下一個DOM更新週期之後執行。通俗講，就是等元件的DOM非同步地重新渲染完成後，再執行callback回撥函數，從而能保證callback回撥函數可以操作到最新的DOM元素。

插槽

編譯作用域：父元件模板的所有東西都會在父級作用域內編譯，子元件模板的所有東西都會在子級作用域內編譯。

插槽（slot）:是vue為元件的封裝者提供的能力。允許在封裝元件時，把不確定的，希望由使用者指定的部分定義為插槽。插槽將父元件的內容與子元件的模板相混合，從而彌補了檢視的不足。

如果父元件沒有插入內容，那麼slot的內容就作為預設出現；若父元件插入了內容，則slot的內容將被插入的內容替換掉。

匿名插槽

在封裝元件時，可以通過<slot>元素定義插槽，從而為使用者與理由內容預留位置。匿名插槽（預設插槽），有且只有一個。

例如：

子元件：

父元件：

補充：

（1）如果在封裝元件時沒有預留任何<slot>插槽，則使用者提供的內容都會被丟棄。

（2）後備內容：如果沒有為插槽提供內容，那麼後備內容會生效。

具名插槽

如果在封裝元件時需要預留多個插槽節點，則需要為每個 <slot> 插槽指定具體的 name 名稱。這種帶有具體名稱的插槽叫做“具名插槽”。

例如：

SlotSon元件：

SlotFather元件：

作用域插槽

在封裝元件的過程中，可以為預留的<slot>插槽繫結props資料，這種帶有props資料的<slot>叫做“作用域插槽”。

例如：

SlotSon2元件：（通過插槽給父元件傳遞資料）

SlotFather元件：接收插槽傳過來的資料，賦給插槽內容

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue.js踩坑之ref參照細節點講解

目錄

ref參照細節點講解

要點簡介：[ 見下文案例 ]

通過ref參照的形式,來操作DOM

步驟如下

重要程式碼如下

ref參照及插槽

ref參照

ref參照DOM元素

ref參照元件範例

實現標籤的按需切換

插槽

匿名插槽

具名插槽

作用域插槽

熱門文章