Vue为什么在组件上未定义道具答案

【问题标题】：Vue why props is undefined on componentVue为什么在组件上未定义道具
【发布时间】：2021-06-06 17:29:48
【问题描述】：

我尝试使用道具将数据传输到我的组件如果我在父项中键入名称，我会看到按钮工作正常，即问题出在组件上。我哪里错了？

提前致谢

家长：

HTML

<div><button @click="changeName" :name="name">Change my name</button></div>

脚本：

import UserDetail from "./UserDetail.vue";
export default {
  components: {
    UserDetail,
    UserEdit,
  },
  data() {
    return {
      name: "Eden",
    };
  },
  methods: {
    changeName() {
      this.name = "EdenM";
    },
  },
};

组件

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  props: ["name"],
};
</script>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

哦哦哦！！我把道具加错地方了！这是我的回答：

   <user-detail :name="name"></user-detail>

【讨论】：

如果:name是一个prop，在子组件中你需要将它指定为prop：props: ['name']或props: {name: String}，或props: { name: { type: String, required: true }}或props: { name: { type: String, default: ''}}见props。
@edenm 如果您回答了自己的问题，请接受您的回答，以便看到该问题的人知道该问题已被回答。
@Tim Tnx，但我只能在 2 天后接受对我的 Q 的回答 :(