🔥 (#76) I have an announcement... #

2022 年 8 月

Hey!

我今天有一个重要的公告要宣布给你：

我将是你掌握 Nuxt 3 的教练！

（但不要告诉任何人，它还没有正式宣布）

Mastering Nuxt 是 Nuxt 的 官方课程，与 VueSchool 和 Nuxt Labs（Nuxt 的创建者）合作创建。

我们正在创建一个全新的课程，教你如何使用 Nuxt 3 构建真实的全栈应用程序。它将在未来几个月内发布，在此期间，我将与您分享更多细节。

这将是史诗般的！

您甚至可能开始在这里看到一些与 Nuxt 相关的提示...

—Michael

One kind of prop, a template prop, can be directly converted into slots without very much work.

This makes your component more reusable.

The text prop here is a template prop, because it is only ever used in the template:

🔥 通过将模板 props 转换为 插槽来提高可复用性 #

模板中的 props，可以直接转换成插槽 slots，而不需要太多的工作。

这使得你的组件 更易于复用。

这里的 text 是一个模板里的 prop ，因为它只在模板中使用过：

<template>
  <button @click="$emit('click')">{{ text }}</button>
</template>

export default {
  name: "Button",
  props: {
    text: {
      type: String,
      required: true,
    },
  },
};

它不会在任何计算中使用，也不会传递到任何地方。相反，它只是被直接插值并呈现到页面。

这种类型的 props 可以直接用插槽替换：

<template>
  <button @click="$emit('click')">
    <slot />
  </button>
</template>

export default {
  name: "Button",
};

这种清理了代码，但更重要的是，它使我们能够更灵活地使用组件。

对于 prop，我们必须像这样使用组件：

<button text="Click me" @click="handleClick" />

如果使用插槽，可以这样任意使用：

<button @click="handleClick">Click on <strong>this</strong> button</button>

🔥 灵活参数 #

有时我们会设置 ref 变量，想要与其他可组合逻辑一起使用。有时我们设置原始数据。

Wouldn’t it be nice if it didn’t matter what we already had? Then we could use our composables and it would just work?

如果我们已经拥有的东西无关紧要，那不是很好吗？然后我们可以使用我们的可组合物，它只是 能跑？

下面是一个使用 VueUse 可组合的 useTitle 的示例：

// We have a ref already
const titleRef = ref("This is the title of the page");
useTitle(titleRef);

// We just have the string
const title = "This is the title of the page";
const titleRef = useTitle(title);

我们可以通过实现灵活参数模式来做到这一点：

export function useTitle(maybeRef) {
  const titleRef = ref(maybeRef);

  // Use titleRef in the composable
}

The opposite is true with the unref function. If we need to use a raw primitive value rather than a ref in our composable, we can use unref to achieve a similar result.

ref 函数会为我们创建一个 ref 变量，或者返回给定的 ref 变量。

这意味着我们可以传递任何一种类型，最终将得到一个 ref 变量。

unref 函数的情况正好相反。如果我们需要使用原始值而不是 ref 变量，则可以使用 unref 函数来返回原始值。

export function useTitle(maybeRef) {
  const titleString = unref(maybeRef);

  // Use titleString in the composable
}

📜 Vite 生态 #

Vite 将 Web 开发工具提升到了一个新的水平。

本文探讨了 Vite 使用和交互所用到的不同工具，并展示了它对 Web 开发社区的影响程度。

看到一个在 Vue-land 开始的项目得到这样的广泛采用，这真是太酷了！

在这里阅读：Vite 生态

💬 Things #

"Things aren’t always #000000 and #FFFFFF." —undefined

"世上的事情并不全是非黑即白" —undefined

🧠 间隔重复：Vue 中特殊的 CSS 伪类选择器 #

想要长时间牢牢记住某些事情，最好方式就是定期回顾，逐渐增加回顾的间隔 👨‍🔬

实际上，记住这些 tips 比发呆有用得多，这是几周前的一个 tip 可以唤起你的记忆。

如你想给 slot 内容添加额定的样式，你可以使用 :slotted 这个伪类选择器：

<style scoped>
  /* 给传入的 slot <p> 标签添加 margin */
  :slotted(p) {
    margin: 15px 5px;
  }
</style>

也可以使用 :global 来应用全局 scope 样式，在 <style scoped> 中也可以使用：

<style scoped>
  :global(body) {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
</style>

如果有很多全局样式想添加，更简单的方式是添加第二个 <style> 标签：

<style scoped>
  /* Add margin to <p> tags within the slot */
  :slotted(p) {
    margin: 15px 5px;
  }
</style>

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
</style>

阅读 文档 了解更多。

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-076-august-31/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。