Vue.JS - Avoid re-rendering of slots when parent re-renders

Question

I'm struggling on Vue.JS with a component that has as children/slots some "complex" components with canvas data (e.g. Maps).

I want to avoid that when the parent component re-renders, their inner slots re-render. Because of how this components work (or any other scenario), every time it re-renders it needs to do all of it's "loading" steps. Even when saving their real-time state.

For example:

Component.vue

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

View

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

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

Is there any way to prevent from slots from re-rendering when their parent re-renders?

Thanks in advance.

Answer 1

Hello use props for a child component, and this child is not will rerender

App

<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>

Child

<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>

How you can see I used console.log("renred"); in the child component, you can check the console, the information will be shown only one time.

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