Vue.js 2 中的嵌套组件

Posted 2023-02-23

【中文标题】Vue.js 2 中的嵌套组件

【英文标题】：Nested components in Vue.js 2

【发布时间】：2018-03-22 01:55:33

【问题描述】：

我已经使用 Vue.js 几个月了，它一直在提醒 webforms 范式，你使用组件来制作网站或 web 应用程序，但是使用 Vue.js 很高兴创建这样的东西，而不是一个整体噩梦是网络表单。

好吧，我的问题是，是否有可能制作嵌套组件只是为了在标记方式上定义其父级的某些行为。示例：

<grid prop1="somevalue" prop2="somevalue">
  <grid-column prop1="somevalue" prop2="somevalue">
    <filter-options prop1="somevalue" prop2="somevalue">
    </filter-options>
  </grid-column>
</grid>

因此，特定的网格组件具有列，而列具有过滤选项。

不想严格依赖于 javascript 代码。

提前致谢

编辑： 只是补充一点，childs-component 不能有模板。他们只是将一些道具传递给父母。

【问题讨论】：

是的，有可能。是不是有些事情没有像您期望的那样工作？

是的，看看 Vue.JS 中的“插槽”概念：vuejs.org/v2/guide/…

好吧，如果你不希望子组件有一个模板，那么你可以让他们的渲染函数返回 null。举个例子，在网格上你把它放一个插槽，然后必须在grid-column组件中放置一些槽来渲染filter-options组件，但是如果grid-column的render函数返回null怎么办？

【参考方案1】：

回答你的问题

如果有可能制作嵌套组件只是为了在标记方式上定义其父级的某些行为

记住您的要求：

不想严格依赖 JavaScript 代码。

答案是否定的，不可能。父级下的组件只能在 DOM 加载后向父级推送（发送）数据。因此，如果您想更改 html，则需要推送一个会触发一些 JavaScript 的值。不过，使用 JavaScript 将是唯一的方法。

为了实现您的要求，我认为在父组件上使用道具更有意义。你有更多的灵活性，你可以让它变得非常通用。