在 vue.js 组件中响应 this.props.children
Reacts this.props.children in vue.js component
React 有类似 this.props.children
的东西:https://facebook.github.io/react/tips/children-props-type.html
Vue.js是否也有一些类似的访问子元素?
Vue.js 有 this.$children
,这也给你一个子组件数组
http://vuejs.org/api/#vm-children
如果要引用特定组件,您可能需要使用 v-ref 和 this.$refs
在您的要求中:
当您处于父组件级别时,使用插槽是将自定义组件传递到子组件的正确方法。
但为什么不起作用?因为在Vue 1.0中,是使用浏览器来解析模板,而不是virtualDOM。浏览器解析有问题:一些 HTML 元素对可以出现在其中的元素有限制。
查看 Vue1.0 文档:vue1.0 - components - template parsing
而你恰好犯了那个错误。
这是Vue1.0的一个限制,你必须写一些指令来做。
但是在 Vue 2.0 中,情况发生了变化,模板解析变成了虚拟 dom 实现。您可以将任何 DOM 元素传递到插槽中。
我在 Vue 2.0 的最后评论中尝试了你的 link,它有效。
只需将外部资源更改为 https://unpkg.com/vue@2.0.1/dist/vue.js
在Vue中相当于this.props.children
是<slot />
.
例子
<template>
<div>
<slot />
</div>
</template>
见http://vuejs.org/guide/components.html#Content-Distribution-with-Slots
React 有类似 this.props.children
的东西:https://facebook.github.io/react/tips/children-props-type.html
Vue.js是否也有一些类似的访问子元素?
Vue.js 有 this.$children
,这也给你一个子组件数组
http://vuejs.org/api/#vm-children
如果要引用特定组件,您可能需要使用 v-ref 和 this.$refs
在您的要求中:
当您处于父组件级别时,使用插槽是将自定义组件传递到子组件的正确方法。
但为什么不起作用?因为在Vue 1.0中,是使用浏览器来解析模板,而不是virtualDOM。浏览器解析有问题:一些 HTML 元素对可以出现在其中的元素有限制。
查看 Vue1.0 文档:vue1.0 - components - template parsing
而你恰好犯了那个错误。
这是Vue1.0的一个限制,你必须写一些指令来做。
但是在 Vue 2.0 中,情况发生了变化,模板解析变成了虚拟 dom 实现。您可以将任何 DOM 元素传递到插槽中。
我在 Vue 2.0 的最后评论中尝试了你的 link,它有效。
只需将外部资源更改为 https://unpkg.com/vue@2.0.1/dist/vue.js
在Vue中相当于this.props.children
是<slot />
.
例子
<template>
<div>
<slot />
</div>
</template>
见http://vuejs.org/guide/components.html#Content-Distribution-with-Slots