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
    };
  }
};

我们将此处的道具传递给子组件，并使用方法对其进行更改

 <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的理解，它是否不应该指向一个全局空间，因此应该未定义？

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

问题2：在反应中，我们可能无法更改传递给子对象的道具？但是我们在这里改变道具吗？此外，通常，如果我们在另一个文件（app.js）中声明一个对象，是否可以将其更改为另一个文件（someApp.js）？ >

Answer 1

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

您不应该更换道具。在这里，您正在更改道具的成员-toDoItem是道具，而complete是道具的成员-虽然不受控制，但您仍然不应该这样做。您应该改为emit an event，而不是parent handles。

您的markComplete应该在父级中，因为它拥有被操纵的数据。看起来像：

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

在孩子中，方法类似于

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

父级将使用v-on来处理切换事件：

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

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

我认为您希望todos是一组项目，并且可能希望v-for在它们上面，每个项目都有一个子组件，但这是另一个问题。

我无法回答您关于在不同文件中声明的对象的最后一个问题，因为我不理解。通常，导入对象并对其进行修改并不罕见。但是，正如我所提到的，Vue组件应该是唯一可以修改其自身数据的组件。

从外部文件更改对象

1 个答案: