如何将组件传递给Polymer中的组件 [英] How to pass a component to a component in Polymer
问题描述
假设一个组件由3个内部组件组成，其中<outer-tag>的影子DOM看起来像这样:
Suppose a component is composed of 3 internal components, where <outer-tag>'s shadow DOM looks something like this:
<div>
<h1>The Outer Tag</h1>
<my-tag1/>
<my-tag2/>
<my-tag3/>
</div>
现在让我们说<outer-tag>，<my-tag1/>和<my-tag3/>始终相同.但是我希望<my-tag2>是可插入的.即通过了.如何在Polymer中做到这一点?
Now let's say that <outer-tag>, <my-tag1/> and <my-tag3/> were always the same. But I want <my-tag2> to be pluggable. i.e. passed in. How would I do that in Polymer?
推荐答案
如果我理解正确的问题，那么您正在寻找一种将随机子代分发到外部标签的DOM中的方法(
If I understood the question right, you are looking for a way to distribute random children into the outer-tag's DOM (Documentation).
在示例中，您将按照以下方式进行操作:
Here's how you would do it in your example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer-inner tags</title>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="outer-tag">
<template>
<div>
<h1>The Outer Tag</h1>
<my-tag1></my-tag1>
<!-- Tell the <outer-tag> that something will go in here -->
<content select=".tag2"></content>
<my-tag3></my-tag3>
</div>
</template>
<script>
Polymer({
is: 'outer-tag'
});
</script>
</dom-module>
<dom-module id="random-tag">
<template>
<div>
<h2>Random Tag</h2>
<div>I'm a random component</div>
</div>
</template>
<script>
Polymer({
is: 'random-tag'
});
</script>
</dom-module>
<!-- Here's how to put them together -->
<outer-tag>
<random-tag class="tag2"></random-tag>
</outer-tag>
</body>
</html>
通常，您可以编写"random-tag"而不是".tag2". select属性接受类似CSS的选择器.
Instead of ".tag2" you could more generally write "random-tag". The select attribute accepts CSS-like selectors.
这篇关于如何将组件传递给Polymer中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
