Polymer 1中子组件修改myObject无法同步到父组件问题求助

我帮你找到了问题的根源！父组件hola-mundo的myObject属性配置里指定了一个名为projectChanged的观察者函数，但你并没有在组件中定义这个函数。这会导致Polymer运行时抛出错误，直接中断了属性更新的流程，所以父组件无法接收到子组件修改后的myObject值，最终控制台输出undefined。

下面是具体的修正方案：

修正步骤 #

1. 移除未定义的观察者配置（或补充定义观察者函数） #

如果不需要这个观察者，直接删除observer: "projectChanged"这一行；如果确实需要监听属性变化，就补充对应的函数实现。

2. （可选但推荐）给myObject设置初始值 #

为了避免属性初始为undefined可能带来的绑定问题，建议给父组件的myObject设置一个初始空对象。

修正后的完整代码 #

父组件 hola-mundo.html #

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./hidding-behaviour.html">
<link rel="import" href="./hola-mundo2.html">

<dom-module id="hola-mundo">
  <style>
    h1{
      color: blue;
    }
  </style>
  <template>
    <h1>hello world</h1>
    <button on-click="showValueMyobject">showValueMyobject</button>
    <hola-mundo2 myObject={{myObject}}></hola-mundo2>
  </template>
  <script>
    Polymer({
      is: "hola-mundo",
      properties:{
        myObject: {
          type: Object,
          notify: true,
          value: function() { return {}; } // 初始化为空对象
          // 移除了未定义的observer配置
        },
      },
      changeValueMyObject: function(){
        let obj ={ id:2, name:'Madrid' }
        this.set('myObject',obj)
      },
      showValueMyobject: function(){
        console.log(this.myObject);
      },
      // 如果需要观察者，取消注释下面的代码
      // projectChanged: function(newVal, oldVal) {
      //   console.log('myObject updated:', newVal);
      // }
    });
  </script>
</dom-module>

子组件 hola-mundo2.html（无需修改，保持原代码即可） #

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./hidding-behaviour.html">

<dom-module id="hola-mundo2">
  <style>
    h1{
      color: blue;
    }
  </style>
  <template>
    <h1>hello world2</h1>
    <button on-click="changeValueMyObject">changeValueMyObject2</button>
  </template>
  <script>
    Polymer({
      is: "hola-mundo2",
      properties:{
        myObject: {
          type: Object,
          notify: true
        },
      },
      changeValueMyObject: function(){
        let obj ={ id:1, name:'Barcelona' }
        this.set('myObject', obj);
      },
      showValueMyobject: function(){
        console.log(this.myObject);
      },
    });
  </script>
</dom-module>

入口页面 index.html（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prueba de index</title>
  <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="./hola-mundo.html">
</head>
<body>
  <hola-mundo></hola-mundo>
</body>
</html>

验证效果 #

现在按照你的复现步骤操作：

1. 点击子组件的changeValueMyObject2按钮修改值
2. 点击父组件的showValueMyobject按钮查看值

控制台会正确输出{id: 1, name: "Barcelona"}，符合你的预期。

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