Polymer属性赋值、跨组件传值及iron-ajax请求体参数动态设置

让我一步步帮你解决这两个Polymer相关的问题：

问题1：设置Polymer属性值并传递给另一个组件 #

要实现属性值在组件间传递，核心是利用Polymer的数据绑定机制，步骤很清晰：

• 第一步：在父组件中定义要传递的属性
  先在父组件的properties块里声明你要传递的属性，指定类型和默认值（可选）：

  properties: {
    productDetails: {
      type: Object,
      value: () => ({ id: 101, name: 'Polymer Guide', price: 29.99 })
    }
  }
  

• 第二步：在父组件模板中绑定到子组件
  假设你有一个子组件product-card，它有一个item-info属性用来接收数据，直接在模板里用单向绑定（[[...]]）把父组件的属性传过去：

  <product-card item-info="[[productDetails]]"></product-card>
  

  如果需要双向绑定（子组件修改后同步回父组件），可以用{{...}}，但单向绑定在大多数场景下更安全，避免不必要的数据流混乱。

• 第三步：子组件接收并处理属性
  在子组件的properties里声明对应的接收属性，还可以加个观察者方法，在属性变化时触发逻辑：

  properties: {
    itemInfo: {
      type: Object,
      observer: '_onItemInfoChanged' // 属性变化时自动调用
    }
  },
  _onItemInfoChanged(newValue) {
    console.log('Received product data:', newValue);
    // 这里可以做渲染或其他业务逻辑
  }
  

问题2：动态设置iron-ajax的requestBody中的end属性 #

你现在是硬编码了requestBody里的值，要动态修改end属性，关键是把requestBody和组件的属性绑定，然后通过Polymer的响应式API更新：

• 第一步：把requestBody声明为组件属性
  先在组件的properties里定义requestBody，给它一个包含默认值的对象：

  properties: {
    requestBody: {
      type: Object,
      value: () => ({
        start: '2024-01-01',
        end: '2024-01-31', // 初始默认值
        name: 'daily-report'
      })
    },
    // 可以再加一个用来存储动态end值的属性，比如用户选择的日期
    selectedEndDate: {
      type: String,
      value: '2024-01-31'
    }
  }
  

• 第二步：绑定iron-ajax的body属性
  在模板里把iron-ajax的body和你的requestBody绑定，同时记得给iron-ajax加个id方便后续调用：

  <iron-ajax
    id="dataAjax"
    url="/api/analytics"
    method="POST"
    body="[[requestBody]]"
    last-response="{{apiResponse}}"
    auto
  ></iron-ajax>
  

• 第三步：动态更新end属性
  当你需要修改end值时，一定要用Polymer的this.set()方法（直接修改对象属性不会触发响应式更新），比如在用户选择日期的回调里：

  onEndDateSelected(event) {
    const newEndDate = event.target.value;
    // 更新requestBody里的end属性
    this.set('requestBody.end', newEndDate);
    // 如果需要立即重新发起请求，调用generateRequest()
    this.$.dataAjax.generateRequest();
  }
  

  如果你希望end值自动跟随selectedEndDate变化，还可以用计算属性来生成requestBody：

  properties: {
    selectedEndDate: {
      type: String,
      value: '2024-01-31'
    },
    requestBody: {
      type: Object,
      computed: '_computeRequestBody(selectedEndDate)'
    }
  },
  _computeRequestBody(endDate) {
    return {
      start: '2024-01-01',
      end: endDate,
      name: 'daily-report'
    };
  }
  

  这样只要selectedEndDate变化，requestBody就会自动更新，开启auto的iron-ajax会自动重新发起请求，非常方便。

内容的提问来源于stack exchange，提问作者megha gupta