在 vue.js 组件中反应 this.props.children

Posted 2023-02-23

【中文标题】在 vue.js 组件中反应 this.props.children

【英文标题】：Reacts this.props.children in vue.js component

【发布时间】：2016-12-22 12:54:40

【问题描述】：

React 有类似 this.props.children: https://facebook.github.io/react/tips/children-props-type.html

Vue.js 是否也有一些类似的访问子元素？

【参考方案1】：

在Vue中相当于this.props.children是<slot />。

示例

<template>
  <div>
    <slot />
  </div>
</template>

见http://vuejs.org/guide/components.html#Content-Distribution-with-Slots

【参考方案2】：

在您的要求中：

当您处于父组件级别时，使用插槽是将自定义组件传递给子组件的正确方法。

但为什么它不起作用？因为在 Vue 1.0 中，它使用浏览器来解析模板，而不是虚拟 DOM。浏览器解析有一个问题：一些 HTML 元素对其中可以出现的元素有限制。

查看 Vue1.0 文档：vue1.0 - components - template parsing

而你恰好犯了这个错误。

这是 Vue1.0 的一个限制，你必须编写一些指令来做到这一点。

但是在 Vue 2.0 中，情况发生了变化，模板解析变成了虚拟 dom 实现。您可以将任何 DOM 元素传递到插槽中。

我在最后一条评论中使用 Vue 2.0 尝试了您的链接，它有效。

只需将外部资源更改为https://unpkg.com/vue@2.0.1/dist/vue.js

【讨论】：

太棒了 - vuejs 切换到这个虚拟 dom 引擎的好决定......

【参考方案3】：

Vue.js 有this.$children，它还提供了一个子组件数组

http://vuejs.org/api/#vm-children

如果您想引用特定组件，您可能需要使用v-ref 和this.$refs

【讨论】：

我用一个例子创建了这个小提琴 - 你能找到问题所在吗：jsfiddle.net/kt8urx7d/1 我没有在

中呈现

哦，看到你想做什么我意识到你实际上想要别的东西 - 插槽：vuejs.org/guide/components.html#Content-Distribution-with-Slots

它很奇怪.. 插槽适用于 some-text 组件，但不适用于 select：jsfiddle.net/n0osk4om/2