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

【问题标题】：Reacts this.props.children in vue.js component在 vue.js 组件中反应 this.props.children
【发布时间】：2016-12-22 12:54:40
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

示例

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

【讨论】：

【解决方案2】：

在您的要求中：

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

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

而你恰好犯了这个错误。

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

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

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

【讨论】：

【解决方案3】：

Vue.js 有this.$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