Javascript Vue中的双向数据绑定：无法从子组件更新父组件

我得到了以下两个组件：

家长：

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12" class="parent">
        <p>Ich bin der Parent component</p>
        <button @click="changeDetail" :name.sync="name">Change Details</button>
        <Child v-bind:name="name"></Child>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",

  data: () => ({
    name: "test"
  }),
  methods: {
    changeDetail() {
      this.name = "Updated from Parent";
    }
  },
  components: {
    Child
  }
};
</script>

Ich bin der父组件

更改详细信息
从“/Child”导入子项；
导出默认值{
姓名：“家长”，
数据：（）=>({
名称：“测试”
}),
方法：{
changeDetail（）{
this.name=“从父级更新”；
}
},
组成部分：{
小孩
}
};

儿童：

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <p>My name is: {{ name}}</p>
        <button @click="resetname">Reset the name</button>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  //   props: ["name"],
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data: () => ({
    newname: "Updated from Child"
  }),
  methods: {
    resetname() {
      this.$emit("update:name", this.newname);
    }
  }
};
</script>

我的名字是：{{name}

重新设置名称
导出默认值{
//道具：[“名称”]，
道具：{
姓名：{
类型：字符串，
必填项：true
}
},
数据：（）=>({
newname:“从子项更新”
}),
方法：{
resetname（）{
this.$emit（“更新：名称”，this.newname）；
}
}
};

---

就我在这里读到的：，我应该使用更新和同步将道具从孩子传递回父母。但是，它不起作用。我不明白这里怎么了。我缺少什么？

通常最好不要将模板绑定到道具，而是绑定一个计算属性，以确保从外部访问和修改数据。它还将稍微简化您的代码，这样您就不必触发更新

起源：

Ich bin der父组件

更改详细信息
从“/Child”导入子项；
导出默认值{
姓名：“家长”，
数据：（）=>({
名称：“测试”
}),
方法：{
changeDetail（）{
this.name=“从父级更新”；
}
},
组成部分：{
小孩
}
};

儿童：

我的名字是：{{currentName}

重新设置名称
导出默认值{
//道具：[“名称”]，
道具：{
姓名：{
类型：字符串，
必填项：true
}
},
数据：（）=>({
//对于数据，请小心使用fat arrow函数
//因为*this*的值不是组件，
//而是父范围。
}),
计算：{
当前名称：{
get（）{返回this.name}，
set（value）{this.$emit（“update:name”，value）；}
}
},
方法：{
resetname（）{
this.currentName=“从子级更新”；
}
}
};

这可能是您可以依赖Vuex之类的工具的地方。需要从共享状态中进行大量工作。我知道，但我仍然很想了解这一点；-）在

Parent

中，您已经将

:name.sync

绑定到了

上，它应该在

上。就是这样，我傻了。谢谢：-）

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12" class="parent">
        <p>Ich bin der Parent component</p>
        <button @click="changeDetail">Change Details</button>
        <Child v-bind:name.sync="name"></Child>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",

  data: () => ({
    name: "test"
  }),
  methods: {
    changeDetail() {
      this.name = "Updated from Parent";
    }
  },
  components: {
    Child
  }
};
</script>

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <p>My name is: {{ currentName }}</p>
        <button @click="resetname">Reset the name</button>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  //   props: ["name"],
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data: () => ({
     //Be careful with fat arrow functions for data
     //Because the value of *this* isn't the component, 
     //but rather the parent scope.
  }),
  computed: {
    currentName: {
        get() { return this.name },
        set(value) { this.$emit("update:name", value); }
    }
  },
  methods: {
    resetname() {
      this.currentName = "updated from child";
    }
  }
};
</script>