Vue.JS - Избегайте повторного рендеринга слотов при повторном рендеринге родителя

Question

Я борюсь с Vue.JS с компонентом, который имеет в качестве дочерних элементов / слотов некоторые "сложные" компоненты с данными холста (например, Карты).

Я хочу избежать этого, когда родительский компонент повторно отрисовывает его внутренние слоты. Из-за того, как эти компоненты работают (или любого другого сценария), каждый раз при повторной визуализации ему необходимо выполнять все этапы "загрузки". Даже при сохранении их состояния в реальном времени.

Например:

Component.vue

<template>
    <div>
        <span>{{value}}</span>
        <slot></slot>
    </div>
</template>

Посмотреть

<Component v-model="value">
    <Map :latitude="0" :longitude="0"/>
</Component>

<script>
    this.value = "Hello";
    setTimeout(()=>{
        this.value="Hello world!";
    },1000);
</script>

Есть ли способ предотвратить повторный рендеринг слотов при повторном рендеринге их родительского элемента?

Заранее спасибо.

Answer 1

Здравствуйте, используйте реквизиты для дочернего компонента, и этот дочерний элемент не будет повторно отображать

Приложение

<template>
  <div id="app">
    <HelloWorld msg="Hello Vue in CodeSandbox!" :somedata="key">
      slot information key: {{ key }}
    </HelloWorld>

    <button @click="key++">key++</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      key: 0,
    };
  },
};
</script>

Ребенок

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>somedata from props: {{ somedata }}</h3>
    <hr />
    <slot></slot>
    <hr />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      default: "",
    },
    somedata: {
      type: Number,
      default: 999,
    },
  },
  created() {
    console.log("renred");
  },
};
</script>

Как вы видите, я использовал console.log("renred"); в дочернем компоненте вы можете проверить консоль, информация будет отображаться только один раз.

https://codesandbox.io/s/naughty-platform-ib68g?file=/src/components/HelloWorld.vue