我从Vue开始,然后关注Traversy Media on 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的值保持等于字符串? (我知道他最终会将待办事项作为道具传递给子组件)
然后在 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绑定是什么?我们在哪里使用它?
答案 0 :(得分:4)
第一季度
在Vue中,您可以将道具传递给子组件。如果您曾经使用过:todos="todos"
。 todos
属性将等于字符串todos
,但是如果使用v-bind:todos
或简称为:todos
,它将prop变为javascript变量todos
。 todos
函数中的data
第二季度
在Vue中,您可以通过不同的方式引用道具。在数组中声明它们只是短一些,但有一个缺点,就是您无法验证道具。在对象中声明道具时,可以指定道具的类型,例如。字符串,数组,对象等。也可以声明默认值并指定所需的道具。
props: {
msg: {
type: String,
required: true,
default: ''
}
}
第三季度
提供的示例将不起作用,因为id
中仅let todo
和name
中没有title
。所以可行的是:
<div v-bind:key="i" v-for="(todo, i) in todos">
再次可以只使用:key="i"
。密钥可以看作是id
。使用它是为了让Vue知道循环中的哪个元素。