🔥 (#71) Great Developers #

2022 年 7 月

Hey 各位，我猜你在寻找 Vue 相关的小技巧。

—Michael

🔥 如何访问父元素组件 Directly accessing parent components (and why) #

Pros 传递，事件触发（Props down, events up），这是大部分情况下父子组件的沟通方式。

但在一些边缘情况下，会有问题。

如果想直接访问父组件，你可以在使用实例属性 $parent：

// 像这样的强耦合通常不是个好主意
this.$parent.methodOnParentComponent();

也可以通过 $root 访问根节点，通过 $children 访问子节点，但在 Vue 3 中被移除了。

什么时候用得上？

我能想到一些场景，比如你想抽象一些行为并让组件像 黑魔法 一样工作。

你如果不使用 props 和 event 来完成交互，可以使用 provide/inject， $parent 和 $root 这些方案完成组件的交互。

很难举一个例子说明哪一种是最好的解决方案。使用 provide 和 inject 通常是一个更好的选择。

🔥 Blockquote 标签 #

这个标签元素可以用来在文章中引用其他地方的内容。

比如这个引用。很多浏览器会自动缩进，大多数网站会自动添加额外的样式。

如果你在使用 div 配合 CSS 解决这类问题，可以考虑使用更具有语义化的 <blockquote> 元素

在 Markdown 里可以使用 > 来表示引用。

📜 可忽略的 watch #

这篇文章介绍了如何在 watch 中使用 flush 选项来创建一些繁复有用的行为。

我不想剧透，自行阅读这篇文章。可忽略的 watch - Ignorable Watch

💬 伟大的开发者 #

“每一个伟大的开发者，都是通过解决 他们之前不可能解决，也从未解决过的 问题从而达到目标的。”—Patrick McKenzie

🧠 间隔重复：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-071-july-27/

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