12

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

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

4

3 回答 3

18

this.props.children在 Vue 中等价于<slot />.

例子

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

请参阅http://vuejs.org/guide/components.html#Content-Distribution-with-Slots

于 2019-05-27T12:45:10.423 回答
4

在您的要求中：

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

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

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

而你碰巧犯了那个错误。

这是 Vue1.0 中的一个限制，您必须编写一些指令来执行它们。

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

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

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

于 2016-10-06T02:55:16.447 回答
1

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

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

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

于 2016-08-16T12:50:02.067 回答