深入剖析 Vue 基础（第 2 部分）：组件交互与动态组件

2023-11-29 09:59:41

组件间双向绑定：高级用法

在 Vue 的上一篇文章中，我们了解了组件间双向绑定的基本原理。本节我们将深入探讨更高级的用法。

绑定到子组件的 Prop

在子组件中使用双向绑定时，我们需要绑定到子组件的 Prop（属性）。Prop 是父组件向子组件传递数据的特殊方式。例如：

<template>
  <ChildComponent v-model="count" />
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

在上面的例子中，ChildComponent 的 count Prop 被绑定到父组件的 count 数据。任何对父组件 count 的修改都会反映在子组件中，反之亦然。

插槽：传递组件内容

插槽允许我们在组件内定义可由父组件填写的区域。这对于在父组件和子组件之间传递自定义内容非常有用。

默认插槽

默认插槽是一个未命名的插槽，允许父组件传递任意内容。例如：

<template>
  <MyComponent>
    <h1>我是父组件传递的标题</h1>
    <p>我是父组件传递的段落</p>
  </MyComponent>
</template>

具名插槽

具名插槽允许我们为插槽定义特定的名称，以便在父组件中使用该名称引用。例如：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>我是父组件传递的标题</h1>
    </template>
    <template v-slot:content>
      <p>我是父组件传递的段落</p>
    </template>
  </MyComponent>
</template>

作用域插槽：传递作用域数据

作用域插槽允许我们向插槽传递数据，这些数据可以在插槽模板中访问。这对于创建动态组件非常有用。例如：

<template>
  <MyComponent>
    <template v-slot:item="{ item }">
      {{ item.name }}
    </template>
  </MyComponent>
</template>

动态组件：按需创建组件

动态组件允许我们在运行时创建和渲染组件。这对于创建可重复使用的组件或根据条件显示不同组件非常有用。例如：

<template>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ChildComponent1'
    }
  }
}
</script>

异步组件：按需加载组件

异步组件允许我们在需要时异步加载组件。这对于优化大型应用程序的性能非常有用。例如：

<template>
  <component :is="asyncComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      asyncComponent: () => import('./ChildComponent1.vue')
    }
  }
}
</script>