如何将属性值从子自定义元素发送到聚合物中的父自定义元素答案

【问题标题】：How to send attribute value from child custom element to parent custom element in polymer如何将属性值从子自定义元素发送到聚合物中的父自定义元素
【发布时间】：2017-06-29 04:13:25
【问题描述】：

我对此进行了很多搜索，但找不到答案。我有以下代码：

Netflix 搜索：

<!DOCTYPE html>
<html>
<head>
    <link href="../bower_components/polymer/polymer.html" rel="import">
    <link href="netflix-search-criteria.html" rel="import">
    <link href="netflix-search-result.html" rel="import">
    <!-- Element Imports -->
</head>

<dom-module id="netflix-search">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
   <netflix-search-criteria></netflix-search-criteria>
   <h1> here it is + {{criteria}}</h1>
   <!--<netflix-search-result content="{{criteria}}"></netflix-search-     result>-->
  </template>
</dom-module>
<script>
  Polymer({
   is: "netflix-search",
   properties: {

     }

        },
    ready: function(e){

    }
  });
</script>

The child element is :

    <!DOCTYPE html>
<html>
<head>
    <link href="../bower_components/polymer/polymer.html" rel="import">
    <link href="../bower_components/paper-material/paper-material.html"     rel="import">
    <link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
    <link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
    <link href="../bower_components/paper-item/paper-item.html" rel="import">
    <!-- Element Imports -->
</head>

<dom-module id="netflix-search-criteria">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
    <paper-material elevation="1">
     <paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value"
     selected="{{selItem}}" on-iron-select="_itemSelected">
        <paper-listbox class="dropdown-content">
        <paper-item>Movie Name</paper-item>
    <paper-item>Actor</paper-item>
    <paper-item>Director</paper-item>
    </paper-listbox>
     </paper-dropdown-menu>
     <template is="dom-if" if="{{show}}">
     <paper-input label="Enter Search content" on-input="_search">
     </paper-input>
     <h1>{{criteria}}</h1>  
     </template>
  </template>
</dom-module>
<script>    
  Polymer({
    is: "netflix-search-criteria",
    _itemSelected : function(e) { 
    console.log("Coming here" + e.target.selectedItem.innerText);
    this.selItem = e.target.selectedItem.innerText;
    if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
    || this.selItem == 'Director')
    {
      this.show = true;
    }
  },
  _search : function(e) {
    var cont = e.target.value;
    if(cont.length > 3){
     this.criteria = this.selItem + "=" + cont;
     console.log("Coming here" + this.criteria);
    }

  },
    properties: {
          selItem: {
          type: String,
          value: ""
          },
          show: {
          type: Boolean,
          value: false
          },
         criteria: {
            type: String,
            value: "Show",
            notify: true,
            reflecToAttribute: true
        }
     },
    ready: function(e){

    }
  });
</script>

我想将值标准从子元素传递到父元素。但不知道该怎么做

【问题讨论】：

标签： attributes polymer parent custom-element

【解决方案1】：

想通了：

这里是代码父类

<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="netflix-search-criteria.html" rel="import">
<link href="netflix-search-result.html" rel="import">
<!-- Element Imports -->
</head>

<dom-module id="netflix-search">
  <style>
/* CSS rules for your element */
</style>
<template>
<netflix-search-criteria criteria={{content}}></netflix-search-criteria>
<netflix-search-result search="{{content}}"></netflix-search-result>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search",
properties: {
content: {
        type: String,
        value: "No",
        notify: true,
        reflecToAttribute: true
    }
 },
ready: function(e){

}
  });
</script>

子类：

<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="../bower_components/paper-material/paper-material.html"   rel="import">
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
<link href="../bower_components/paper-item/paper-item.html" rel="import">
<!-- Element Imports -->
</head>

<dom-module id="netflix-search-criteria">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
<paper-material elevation="1">
 <paper-dropdown-menu id="mymenu" label="What do you know about the  content?" attr-for-selected="value"
 selected="{{selItem}}" on-iron-select="_itemSelected">
    <paper-listbox class="dropdown-content">
    <paper-item>Movie Name</paper-item>
    <paper-item>Actor</paper-item>
    <paper-item>Director</paper-item>
    </paper-listbox>
 </paper-dropdown-menu>
 <template is="dom-if" if="{{show}}">
     <paper-input label="Enter Search content" on-input="_search">
     </paper-input>
     <h1>{{content}}</h1>
     </template>
  </template>
</dom-module>
<script>    
 Polymer({
    is: "netflix-search-criteria",
_itemSelected : function(e) {
console.log("Coming here" + e.target.selectedItem.innerText);
    this.selItem = e.target.selectedItem.innerText;
    if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
    || this.selItem == 'Director')
    {
      this.show = true;
    }
  },
  _search : function(e) {
var cont = e.target.value;
if(cont.length > 3){
 this.criteria = this.selItem + "=" + cont;
 console.log("Coming here" + this.criteria);
    }

  },
properties: {
      selItem: {
      type: String,
      value: ""
      },
      show: {
      type: Boolean,
      value: false
      },
     criteria: {
        type: String,
        value: "Show",
        notify: true,
        reflecToAttribute: true
        }
     },
    ready: function(e){

    }
  });
</script>

【讨论】：