4

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.

c4b4d4
  • 964
  • 12
  • 32

1 Answers1

0

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

Ruslan Semenov
  • 319
  • 3
  • 5
  • 3
    This doesn't represent the problem in the question because the OP is already using components and props. The issue is the slot (which contains the child) is rerendering with the parent, and the OP wants to prevent the slot's rerender, as it presumably doesn't change. – tony19 Nov 30 '20 at 20:13
  • @tony19 Do you think this possible? The slot - part of the component, if it re-render, all data will be recreated. I think he has only one way: stop rerender the parent component. – Ruslan Semenov Nov 30 '20 at 20:58