动态添加 Polymer 组件属性答案

【问题标题】：Adding Polymer component attributes dynamically动态添加 Polymer 组件属性
【发布时间】：2016-08-24 00:54:30
【问题描述】：

我有一个聚合物组件包含在另一个像这样的聚合物组件中

<dom-module id="custom-component2">
    <template>
        <custom-component1 id="component1" type="abc" config="xyz"></custom-component1>
    </template>
</dom-module>
<script>
Polymer({
    is: 'custom-component2',
    properties: {

    },
    ready: function() {

    },
    init: function() {

    }
});
</script>

无论如何我可以为我的“custom-component1”动态添加类型、配置等属性 -

<dom-module id="custom-component2">
    <template>
        <custom-component1 id="component1"></custom-component1>
    </template>
</dom-module>
<script>
Polymer({
    is: 'custom-component2',
    properties: {

    },
    ready: function() {
        self.$.component1.type = "abc";
        self.$.component1.config = "xyz";
    }
});
</script>

或者我可以将这些选项作为一个整体作为一个对象传递吗？

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： polymer

【解决方案1】：

这应该可行：

<dom-module id="custom-component2">
    <template>
        <custom-component1 id="component1"></custom-component1>
    </template>
</dom-module>
<script>
Polymer({
    is: 'custom-component2',
    properties: {

    },
    attached: function() {
        this.$.component1.type = "abc";
        this.$.component1.config = "xyz";
    }
});
</script>

对对象使用数据绑定：

<dom-module id="custom-component2">
    <template>
        <custom-component1 id="component1" data={{_data}}></custom-component1>
    </template>
</dom-module>
<script>
Polymer({
    is: 'custom-component2',
    properties: {
        _data:{
           type: Object,
           value: function(){ 
                  return {type:"abc", config:"xyz"};
           }
        },
    },
});
</script>

【讨论】：