關於作用域插槽v-slot的用法可以先看看文檔 https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD 現在我們進入正題 我們用到一個第三方組件validate ...
關於作用域插槽v-slot的用法可以先看看文檔
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
現在我們進入正題
我們用到一個第三方組件validate，這個第三方組件的插槽傳了一個屬性error值給我們，我們現在想要在父級中獲得這個error值, 為了簡單起見，我們創建一個validate組件作為測試。
我們覺得可以在v-slot下使用一個方法，把error傳到父級去，不就行了嗎，的確是可以的： https://jsfiddle.net/jswenjie/pxru6y2m/5/
問題出現
我們的頁面有多個validate的情況下，需要搜集所有的error，那麼我們可以用個數組：https://jsfiddle.net/jswenjie/pxru6y2m/7/
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<validate v-for="x in 2" :key="x" v-slot="{ error }">
in scope {{ error }} {{ sendToParent(error, x-1) }}
</validate>
<div>in parent {{ error }}</div>
</div>
<script>
// validate為第三方組件不允許修改
Vue.component("validate", {
data() {
return {
error: ""
};
},
mounted: function() {
setInterval(() => (this.error = Date.now()), 1000);
},
template: '<div><slot :error="error" /></div>'
});
new Vue({
el: "#app",
data() {
return {
error: []
};
},
methods: {
sendToParent(error, index) {
this.$set(this.error, index, error);
}
}
});
</script>
</body>
</html>
我們發現雖然結果是正確的，不過在控制臺下出現了warning警告，[Vue warn]: You may have an infinite update loop in a component render function. 有死迴圈的問題。
問題解決
我有一個解決方案（https://javascript.shop/2019/11/get-slot-prop-in-parent-by-v-slot），希望大家不要先看我的方案，可能會影響了大家的思路，因為我感覺我的方案略顯複雜。大家是否有更好的解決方案，歡迎評論中告知，多謝。。。
