Jac 前端攻城屍的玻璃心: component

顯示具有 component 標籤的文章。顯示所有文章

2021年1月13日星期三

vue component的強制重新render

不知道大家有沒有遇過想要重置component的時候呢，不論是在validate後想要消除紅匡，或是在某些特定場合取到資料後，需要重新繪製畫面，最直覺的作法應該是透過if消除畫面後再重新顯示吧，程式碼如下

<template>
  <div v-if="show">
    hello
    <button type="button" @click="rerender()"></button>
  </div>
</template>

<script>
export default {
  data: () => ({
    show: true
  }),
  methods: {
    rerender() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      }))
    }
  }
}
</script>

但這樣小編總覺得不是這麼直覺跟簡潔！

那有沒有更簡單的方式呢？有的！只要利用key這個屬性讓這個component屬於一個全新的物件就可以了

<template>
  <div :key="index">
    hello
    <button type="button" @click="rerender()"></button>
  </div>
</template>

<script>
export default {
  data: () => ({
    index: 0
  }),
  methods: {
    rerender() {
      this.index++
    }
  }
}
</script>

2021年1月7日星期四

Vue component的v-model

承繼上一篇，我們在撰寫component時，除了要接value，如果data改變，同時也要emit出去，所以程式碼就會如下

export default {
  props: ["value"],
  data: () => ({
    data: ""
  }),
  watch: {
    data() {
      this.$emit("input", this.data);
    },
    value: {
      immediate: true,
      handler() {
        this.data = this.value;
      }
    }
  }
};

乍看之下也沒什麼問題，小編也這樣寫了好幾年了，但小編一直對於宣告一個data:""感到不是很舒服，雖然只是個過水變數，但沒有更乾淨的寫法嗎？還有小編其實一直對於watch很感冒，watch用得好可以帶你上天堂，用不好你就好幾天不用下班，甚至忙到你小孩覺得你只是個很有趣的叔叔！所以能不用就不要用，因此這幾天在賺國產車時想到一個妙招，可以使用computed的set阿！！直接超級簡化，我們直接來看程式碼

export default {
  props: ["value"],
  computed: {
    data: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  }
};

是不是簡單很多呢，打完收工下班！

2021年1月13日 星期三

vue component的強制重新render

2021年1月7日 星期四

改變Vue sub component樣式

Vue component的v-model

2021年1月13日星期三

2021年1月7日星期四