vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式

更新時間：2024年04月18日 11:02:34 作者：raoxiaoya

這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

this.$refs,this.$emit,this.$store,this.$nextTick的使用

this.$store

是vue用到了狀態(tài)管理工具 vuex，就是一個保存全局數(shù)據(jù)的庫。

this.$nextTick()

官方解釋：

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。

有些操作（比如 this.$refs）需要在確保DOM被渲染完成后才能調(diào)用成功，這樣就需要寫在 this.$nextTick() 里面了。

this.$refs

我們在標簽或者組件上定義 ref屬性，比如在el-form上定義 ref="form1"，這樣我們就可以使用this.$refs.form1.validate(...)來訪問這個組件中定義的屬性和方法，因為 Element-ui 為 el-form 定義了 validate 方法。

1、如果ref名稱是動態(tài)的呢，即 this.$refs.refName ，而 refName 是個變量（比如函數(shù)的參數(shù)），此時需要使用中括號，即 this.$refs.[refName].xxx

2、如果使用的:ref="xxx"來定義的，則應(yīng)該是 this.$refs.[refName][0].xxx

3、ref 是在渲染完成之后才會有的，因此在調(diào)用 this.$refs.refName.xxx 的時候要確保 refName 這個DOM已經(jīng)被渲染出來了，最典型的就是 ueditor，我們需要在它被渲染出來之后才能去調(diào)用組件的 set 方法去填充編輯器的內(nèi)容，但是你并不知道它什么時候能渲染成功，只能使用延遲的方式，比如 this.$nextTick(() => {})，或者 window.setTimeout(() => {}, 500)

4、同樣的，由于 this.$refs 不是響應(yīng)式的，如果通過它來訪問標簽或組件的屬性，需要在 this.$nextTick(() => {}) 之內(nèi)。

this.$emit

this.$emit()主要用于子組件像父組件傳遞事件與參數(shù)。

上面說到，父組件可以使用 this.$refs 訪問子組件；這里的 this.$emit 就是子組件用來觸發(fā)父組件的事件。

<body>
<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>

<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="increment">{{ counter }}</button>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            increment: function () {
                this.counter += 1;
                this.$emit('increment', "參數(shù)"); // increment 是自定義的事件
            }
        }
    });
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function (e) {
                this.total += 1;
                console.log(e);
            }
        }
    })
</script>