javascript - 从外部文件更改对象

Question

我正在学习 Vue，在此之前我有一些使用 React 的经验。

随着我继续理解 vue 的基础知识，我将一些东西与 JS 进行比较

<template>
  <div id="app">
   <HelloWorld msg="Below This we will inclue our To-do task list"/>
    <p>{{msg}}</p>
    <Todos :toDoItem="todos"/>
  </div>
</template>

import Todos from "./components/todo.vue";
let todo = 
  {
    name: "Rohit",
    title: "Full Stack Developer",
    completed: true
  }

export default {
  name: "app",
  components: {
    HelloWorld,
    Todos
  },
  data() {
    return {
      msg: "hello",
      todos: todo
    };
  }
};

我们将此处的 Prop 传递给子组件并使用方法更改它

 <template>
  <div>
    <div class="main-class">
      <p>{{toDoItem.title}}</p>
      <input type="checkbox" v-on:change="markComplete">
    </div>
  </div>
</template>

  <script>
export default {
  name: "toDoItem",
  props: {
    toDoItem: {
      type: Object
    }
  },
 method: {
  markComplete() {
   this.toDoItem.complete = !this.toDoItem.complete
   }

};
</script>

这是我无法理解的地方。

问题 1:根据我对 this 的理解，它不应该指向一个全局空间，因此 this 应该是未定义的吗？

 markComplete() {
   this.toDoItem.complete = !this.toDoItem.complete
   }

问题 2: 在 React 中，我们可能无法更改传递给子对象的 props？但我们在这里改变 Prop ？另外，一般来说，如果我们在另一个文件(app.js)中声明一个对象，我们可以将其更改为另一个文件(someApp.js)吗？

Answer 1

Vue 实例中的所有方法都绑定(bind)到该实例，以便 this 正常工作。

你不应该改变 Prop 。在这里，您正在更改 prop 的成员 - toDoItem 是一个 prop，而 complete 是它的成员 - 这是不受控制的，但您仍然不应该做吧。你应该 emit an event那parent handles .

您的 markComplete 应该位于父级中，因为它拥有正在操作的数据。它看起来像:

markComplete() {
  this.todos.complete = !this.todos.complete;
}

在 child 中，方法类似于

toggleComplete() {
  this.$emit('toggle');
}

父级会使用 v-on处理切换事件:

<Todos :toDoItem="todos" v-on:toggle="markComplete"/>

这样，操作组件所拥有的数据的所有代码都发生在该组件内。没有人调用其他人的方法或修改他们的数据。

我认为您打算让 todos 成为一个项目数组，并且可能想要 v-for在它们之上，每个项目都有一个子组件，但这是另一个问题。

我无法回答你关于在不同文件中声明的对象的最后一个问题，因为我不明白它。一般来说，导入对象并修改它们并不罕见。不过，正如我提到的，Vue 组件应该是唯一可以修改自己数据的组件。