代码之家 › 专栏 › 技术社区 › Carlos C

Vue。JS-避免在父级重新渲染时重新渲染插槽

vuejs-slots vue-component vuejs2 vue.js

Carlos C · 技术社区 · 4 年前

我在Vue上挣扎。JS中有一个组件,它有一些带有画布数据的“复杂”组件(例如Maps)。

我想避免在父组件重新渲染时,它们的内部插槽也会重新渲染。由于此组件的工作方式(或任何其他场景),每次重新渲染时都需要执行所有的“加载”步骤。即使保存实时状态。

例如:

组件.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>

当父级重新渲染时,是否有任何方法可以防止插槽重新渲染?

提前感谢。

0 回复 | 直到 4 年前

Ruslan Semenov 4 年前

Hello使用props作为子组件,而这个子组件不会重新渲染

应用程序

<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

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前