vue.js - Vue为什么在组件上未定义道具

Question

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

提前致谢

家长：

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.jsvuejs2vue-component

Answer 1

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

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