vue中的v-bind是什么

Question

我从Vue开始，然后关注Traversy Media在YouTube上的视频教程

在那里他使用了v-bind，但是我没有正确解释它们是什么（或者至少我无法理解）

出于某种原因，我仍然觉得文档难以理解。

这就是我们正在做的。

<template>
  <div id="app">
    <p>{{msg}}</p>
    <Todos v-bind:todos="todos" />
  </div>
</template>

<script>
import Todos from "./components/todo.vue";
let todo = [
  {
    name: "Rohit",
    title: "Full Stack Developer"
  },
  {
    name: "Varun",
    title: "head of marketing"
  },
];

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

问题：1 有人可以理解这段代码吗？

 <Todos v-bind:todos="todos" />

像什么是v-bind，以及为什么我们要使todo的值等于string？（我知道他最终将待办事项作为道具传递给子组件）

然后在todo.vue中，他正在做这样的事情

<template>
  <div v-bind:key="todo.id" v-for="todo in todos">
      <h3>{{todo.title}}</h3>
 </div>
</template>

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

问题2：这让我感到非常恐惧。首先，在导出默认值中，为什么他要在props中使用数组？ props: ["todos"]？从他们传递字符串的样板代码开始，他们只是做了这样的事情， props: {msg: String}所以为什么props: ["todos"]在这里？

export default {
  name: "HelloWorld",
  props: {
    //We are defining the message type here
    msg: String
  }
};

问题3： 最后在这行

 <div v-bind:key="todo.id" v-for="todo in todos">
      <h3>{{todo.title}}</h3>

我了解执行此操作的原因，v-bind:key="todo.id"但是又有什么是v-bind？我们在哪里使用它？

Answer 1

Q1

在Vue中，您可以将道具传递给子组件。如果您使用过：todos="todos"。todosprop将等于字符串，todos但是带有v-bind:todos或简称:todos为prop的javascript变量todos。这是todos从data功能

Q2

在Vue中，您可以通过不同的方式引用道具。在数组中声明它们只是短一些，但有一个缺点，就是您无法验证道具。在对象中声明道具时，可以指定道具的类型，例如。字符串，数组，对象等。也可以声明默认值并指定所需的道具。

props: {
   msg: {
     type: String,
     required: true,
     default: ''
   }
}

Q3

提供的例子是行不通的，因为没有id在let todo公正name和title。所以可行的是：

<div v-bind:key="i" v-for="(todo, i) in todos">

同样，可以只使用:key="i"。钥匙可以看作是一个钥匙id。使用它是为了让Vue知道循环中的哪个元素。