vuejs2 - 如何在 vue.js 中渲染父组件中的子组件，并且只渲染子组件中发生的更改？

Question

到目前为止我所做的是创建了两个存在于src/components文件夹中的组件，我想添加这些组件包含在src/views文件夹中的父组件中。

我有一个名为 form.vue 的组件和另一个组件background.vue

我想要的是，在（用于背景目的）form.vue之上显示（包含表单）。backgound.vue所以每次，孩子发生任何变化，都会迫使整个父页面重新渲染。那么有什么办法可以解决这个问题吗？

下面是文件夹结构：

标签： vuejs2vue-componentparent-child

Answer 1

您可以为此使用插槽，因此在您的 background.vue 中，您将拥有：

<template>
 ...
   <slot><slot> <!-- place where the external component will be rendered -->
 ...
 </template>

然后在主要组件中，您将拥有：

<background>
  <my-form></my-form>
</background>