如何在父級下訪問v-slot的值——vuejs

時間 2019-11-25

標籤如何訪問 slot vuejs 简体版

原文原文鏈接

關於做用域插槽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%BDjavascript

如今咱們進入正題

咱們用到一個第三方組件validate，這個第三方組件的插槽傳了一個屬性error值給咱們，咱們如今想要在父級中得到這個error值, 爲了簡單起見，咱們建立一個validate組件做爲測試。html

咱們以爲能夠在v-slot下使用一個方法，把error傳到父級去，不就好了嗎，的確是能夠的： https://jsfiddle.net/jswenjie/pxru6y2m/5/vue

問題出現

咱們的頁面有多個validate的狀況下，須要蒐集全部的error，那麼咱們能夠用個數組：https://jsfiddle.net/jswenjie/pxru6y2m/7/java

<!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），但願你們不要先看個人方案，可能會影響了你們的思路，由於我感受個人方案略顯複雜。你們是否有更好的解決方案，歡迎評論中告知，多謝。。。app

相關標籤/搜索