Vue + Nuxt：从父组件传递（绑定）动态数据到子组件的问题答案

【问题标题】：Vue + Nuxt: problem passing (bind) dynamic data from parent to child componentVue + Nuxt：从父组件传递（绑定）动态数据到子组件的问题
【发布时间】：2021-06-27 12:05:08
【问题描述】：

我是 Vue 的新手，我正在努力通过道具将动态数据从父组件传递到子组件。我的父组件应该通过 visible 属性将布尔值 (isModalVisible) 传递给子组件。在父级中，当单击按钮时，isModalVisible 会发生变化（从 false 变为 true）。但是子组件保持初始值。据我了解， data() 在创建组件时执行，并且在任何已绑定的值（在本例中为可见）发生更改时执行，但这不会发生。任何人都可以帮助我找出我缺少什么？

父组件：

<template>
<div>
   {{ isModalVisible }}
   <CoursesModal :visible="isModalVisible" />
   <button @click="showModal" title="Courses">
      Courses
   </button>
</div>
</template>
<script>
import CoursesModal from "../components/modals/Courses.vue";
export default {
  components: {
    CoursesModal
  },
  data() {
    return {
      isModalVisible: false
    };
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    }
  },
};
</script>

子（模态）组件：

<template>
  <div>
    {{ visible }}
  </div>
</template>

<script>
export default {
  components: {
    props: {
      visible: {
        type: Boolean,
        default: true
      }
    }
  },

  data: function() {
    return {
      visible: false,
    };
  }
};
</script>

我也试过了

return {
   visible: this.visible,
};

但是这个值是未定义的。

我的 package.json：

"dependencies": {
   "core-js": "^3.9.1",
   "nuxt": "^2.15.3"
}

【问题讨论】：

如果您有一个名为 visible 的道具，请不要保留具有确切名称的数据属性。仅使用 prop 值，您不需要子组件中的数据属性
另外，当你的 prop 发生变化时，你的 data 属性不应该发生变化，你可以直接使用 prop 的值来观察变化，并采取相应的行动。
@Towkir 我试图删除数据函数，但编译器抛出错误“属性或方法“可见”未在实例上定义，但在渲染期间被引用”

标签： vue.js nuxt.js

【解决方案1】：

我认为您对 components 属性有误。 components 属性没有 props 属性，用于注册组件。你可以进一步阅读here和here

这里是props的正确使用方法：

<template>
  <div>
    {{ visible }}
  </div>
</template>

<script>
export default {
  // removed the components and data property
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  }
};
</script>

【讨论】：

该死的，就是这样...我在 components 键中放置了道具...