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

Question

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

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

Answer 1

相当于this.props.childrenVue 中的<slot />.

例子

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

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

Answer 2

在您的要求\xef\xbc\x9a

\n\n

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

\n\n

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

\n\n

参见Vue1.0文档：vue1.0-组件-模板解析

\n\n

而你恰好犯了这个错误。

\n\n

这是 Vue1.0 中的一个限制，你必须编写一些指令来完成它们。

\n\n

但在 Vue 2.0 中，情况发生了变化，模板解析变成了 virtual-dom 工具。您可以将任何 DOM 元素传递到槽中。

\n\n

我用 Vue 2.0 尝试了上次评论中的链接，它有效。

\n\n

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

\n