당신이 알아야 할 25가지 Vue 팁-View.js-php.cn

이 기사는 개발 속도를 향상시키는 25가지 Vue 팁을 요약하고 공유합니다. 모든 사람에게 도움이 되기를 바랍니다.

당신이 알아야 할 25가지 Vue 팁

1. prop을 유형 목록으로 제한합니다.

prop 정의에서 validator 옵션을 사용하여 prop을 특정 값 집합으로 제한할 수 있습니다: validator 选项，你可以将 prop 限制为一组特定的值：

export default {
  name: &#39;Image&#39;,
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => [&#39;square&#39;, &#39;rounded&#39;].includes(s)
    }
  }
};

로그인 후 복사

这个 validator 函数接受一个 prop，返回 true 或 false。当你需要比布尔值允许的更多选项时，也可以使用它。按钮类型或警报类型（信息、成功、危险、警告）是一些比较常见的用途。【相关推荐：vuejs视频教程】

2. 默认内容和扩展点

Vue 中的slot可以具有默认内容，你可以制作更易于使用的组件：

<button class="button" @click="$emit(&#39;click&#39;)">
  <slot>
    <!-- 如果没有提供slot则使用 -->
    Click me
  </slot>
</button>

로그인 후 복사

基本上你可以获取组件的任何部分，将它包装在一个slot中，然后你可以使用你想要的任何内容覆盖该组件的该部分。默认情况下，它仍然会照常一样工作，不过还可以有更多选择：

<template>
  <button class="button" @click="$emit(&#39;click&#39;)">
    <!-- 一开始在 slot 标签中添加什么都不做 -->
    <!-- 我们可以通过向 slot 提供内容来覆盖它 -->
    <slot>
      <div class="formatting">
        {{ text }}
      </div>
    </slot>
  </button>
</template>

로그인 후 복사

现在你可以用多种不同的方式使用此组件。简单的默认方式或者你自己的自定义方式：

<!-- 使用组件的默认功能 -->
<ButtonWithExtensionPoint text="Formatted text" />

<!-- 使用扩展点创建自定义行为 -->
<ButtonWithExtensionPoint>
  <div class="different-formatting">
    在这里做一些不同的事情
  </div>
</ButtonWithExtensionPoint>

로그인 후 복사

3. 使用引号观察嵌套值

你可能不知道这一点：只需使用引号就可以轻松地直接查看嵌套值：

watch {
  &#39;$route.query.id&#39;() {
    // ...
  }
}

로그인 후 복사

这对于处理深度嵌套的对象非常有用

4. 知道何时使用 v-if（以及何时避免使用）

有时不使用v-if，使用v-show会更高效：

<ComplicatedChart v-show="chartEnabled" />

로그인 후 복사

当v-if打开和关闭时，它将完全创建和销毁元素。v-show不同的是将创建元素并将其留在那里，通过将其样式设置为display: none来隐藏它。

如果你需要切换的组件渲染起来代价比较高，那么这样做会更有效率。另一方面，如果你不需要立即使用那个组件，可以使用v-if以便它跳过渲染它并更快地加载页面。

5. 单作用域 slot 的简写（不需要模板标签！）

Scoped slot 比较有趣，但为了使用它们，你也必须使用很多template标签。

然而有一个速记可以让我们摆脱它，但前提是我们使用单个作用域slot。

可以不用这样写：

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

로그인 후 복사

我们可以这样写：

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

로그인 후 복사

这样更简单、直接。

6. 有条件地渲染slot

每个 Vue 组件都有一个特殊的 $slots 对象，其中包含所有slot。默认slot具有默认键，名字命名的slot都使用它们的名称作为键：

const $slots = {
  default: <default slot>,
  icon: <icon slot>,
  button: <button slot>,
};

로그인 후 복사

但是这个$slots对象只有应用于组件的slot，而不是每个定义的slot。

以这个定义了几个slot的组件为例，包括几个命名的slot：

<!-- Slots.vue -->
<template>
  <div>
    <h2>这里是一些slots</h2>
    <slot />
    <slot name="second" />
    <slot name="third" />
  </div>
</template>

로그인 후 복사

如果我们只对组件应用一个slot，则只有该slot会出现在我们的$slots对象中：

<template>
  <Slots>
    <template #second>
      这将应用于第二个slot
    </template>
  </Slots>
</template>

로그인 후 복사

$slots = { second: <vnode> }

로그인 후 복사

我们可以在我们的组件中使用它来检测哪些slot已应用于组件，例如，通过隐藏slot的包装元素：

<template>
  <div>
    <h2>一个包裹的slot</h2>
    <div v-if="$slots.default" class="styles">
      <slot />
    </div>
  </div>
</template>

로그인 후 복사

现在div，应用样式的包装器只有在我们实际用某些东西填充该slot时才会呈现。

如果我们不使用v-if，div如果我们没有slot，我们最终会得到一个空的和不必要的。根据所div具有的样式，这可能会弄乱我们的布局并使事情看起来很奇怪。

为什么我们希望能够有条件地渲染slot呢？

使用条件slot主要有以下三个原因：

使用 wrapper div 来添加默认样式时
slot是空的
当我们将默认内容与嵌套slot组合

例如，当我们添加默认样式时，我们会在slot周围添加一个div：

<template>
  <div>
    <h2>This is a pretty great component, amirite?</h2>
    <div class="default-styling">
      <slot >
    </div>
    <button @click="$emit(&#39;click&#39;)">Click me!</button>
  </div>
</template>

로그인 후 복사

但是，如果父组件没有将内容应用到该slot，我们最终会在页面div上呈现一个空的：

<div>
  <h2>这是一个非常棒的组件</h2>
  <div class="default-styling">
    <!-- slot中没有内容，但仍会呈现此 div-->
  </div>
  <button @click="$emit(&#39;click&#39;)">Click me!</button>
</div>

로그인 후 복사

v-if在包装上添加它div

<div>
  <h2>这是一个非常棒的组件</h2>
  <button @click="$emit(&#39;click&#39;)">Click me!</button>
</div>

로그인 후 복사

이 유효성 검사기 함수는 prop을 받아들이고 true 또는 false를 반환합니다. 부울 값이 허용하는 것보다 더 많은 옵션이 필요한 경우에도 사용할 수 있습니다. 버튼 유형 또는 경고 유형(정보, 성공, 위험, 경고)은 보다 일반적으로 사용됩니다. [관련 권장사항: vuejs 비디오 튜토리얼

]

2. 기본 콘텐츠 및 확장 포인트

Vue의 슬롯에는 기본 콘텐츠가 있을 수 있으며 사용하기 쉬운 구성 요소를 만들 수 있습니다.

<!-- 可惜这个活动不存在 -->
<slot @change="update" />

당신이 알아야 할 25가지 Vue 팁

1. prop을 유형 목록으로 제한합니다.

2. 默认内容和扩展点

3. 使用引号观察嵌套值

4. 知道何时使用 v-if（以及何时避免使用）

5. 单作用域 slot 的简写（不需要模板标签！）

6. 有条件地渲染slot

为什么我们希望能够有条件地渲染slot呢？

]

export default { mounted() { // 当事情发生变化时调用`update` const observer = new MutationObserver(this.update); // 观察这个组件的变化 observer.observe(this.$el, { childList: true, subtree: true }); } };로그인 후 복사

슬롯을 조건부로 렌더링하려는 이유는 무엇입니까?

9. 覆盖子组件的样式——正确的方法

10. 用上下文感知组件创造魔法

1. 状态共享

2. 配置

3. 造型

11. 如何使在 Vue 之外创建的变量具有响应性？

12. 在 v-for 中解构

13. 在 Vue 中循环一个范围

14. 观察组件中的任何内容

15. 窃取道具类型

16. 检测元素外部（或内部）的点击

17. 递归槽

18. 组件元数据

19. 多文件单文件组件

20. 可重用组件不是你想的那样

21. 从组件外部调用方法

22. 观察数组和对象

23. 与 Vue Router 深度链接

24. 模板标签的另一种用途

25. 处理错误（和警告）的更好方法

export default { mounted() { // 当事情发生变化时调用`update` const observer = new MutationObserver(this.update); // 观察这个组件的变化 observer.observe(this.$el, { childList: true, subtree: true }); } };
로그인 후 복사