Question

我想通过一个插槽将属性传递给子组件，基本上期望文本被渲染和传递，所以理想情况下不必在子组件中做任何事情

父

<span slot="dialog__slot-heading">[[_headerText]]</span>

_headerText: {
  type: String,
  computed: '_computeHeaderText(activeMaturity.row.target)',
},

子

<h3 class="dialog__heading"><slot name="dialog__slot-heading"></slot></h3>

但是目前没有任何内容得到渲染，任何帮助都会得到赞赏

Answer 1

您的问题可能缺少一些重现问题的相关代码，但这里是您尝试实现的目标的演示：

将named slots与Polymer：

一起使用

从您的父元素中，在子元素的light DOM中声明<span>。给<span>一个命名插槽（例如，在这种情况下为dialog__slot-heading）。

<dom-module id="x-parent">
  <template>
    <x-child>
      <span slot="dialog__slot-heading">[[_headerText]]</span>
    </x-child>
  </template>
</dom-module>

在您的子元素中，声明<slot name="FOO">替换为您在步骤1中选择的名称FOO：

<dom-module id="x-child">
  <template>
    <slot name="dialog__slot-heading">Default Child Heading</slot>
  </template>
</dom-module>

demo

Polymer 2将Dynamic文本传递给Slot

1 个答案:

将named slots与Polymer：