Vue.js在循环中传递变量给另一个组件

Question

作为Vue.js的初学者，我试图创建一个Todo应用程序，但问题似乎是在循环时将变量传递给另一个组件。我想传递item到另一个嵌入式组件。这是我对所有组件的处理:

在main.js

:

import Vue from "vue";
import App from "./App.vue";
import Todo from "./components/Todo";
import itemComponent from "./components/itemComponent";
Vue.config.productionTip = false;
Vue.component('todo', Todo);
Vue.component('itemcomponent', itemComponent);
new Vue({
render: h => h(App)
}).$mount("#app");

在App.vue

:

<template>
<div id="app">
<todo></todo>
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<!--  <HelloWorld msg="Hello Vue in CodeSandbox!" /> -->
</div>
</template>
<script>

export default {
name: "App",
components: {

},
};
</script>

在Todo.vue

:

<template>
<div>
<input type="text" v-model="nameme" />
<button type="click" @click="assignName">Submit</button>
<div v-for="(item, index) in result" :key="item.id">
<itemcomponent {{item}}></itemcomponent>
</div>
</div>
</template>

<script>
import { itemcomponent } from "./itemComponent";
export default {
props:['item'],
data() {
return {
nameme: "",
upernameme: "",
result: [],
components: {
itemcomponent,
},
};
},
methods: {
assignName: function () {
this.upernameme = this.nameme.toUpperCase();
this.result.push(this.nameme);
this.nameme = "";
},
},
};
</script>

在itemComponent.vue

:

<template>
<div>
<input type="text" value={{item }}/>
</div>
</template>

<script>
export default {
props: {
item: String,
},
data() {
return {};
},
};
</script>

我错在哪里?谢谢你的帮助。

Answer 1

相当多的错误:

1. 你应该在它们的父组件中导入单页组件并在那里注册它们，而不是在main.js文件中。编辑:对此的解释在docs
中给出。

全局注册通常不理想。例如，如果你正在使用Webpack这样的构建系统，全局注册所有组件意味着即使你停止使用某个组件，它仍然可以包含在你的最终构建中。这不必要地增加了用户必须下载的JavaScript数量。

2. 您在Todo中有一个组件注册。vue，但是你把它放错了位置，所以它只是一个没有被使用的数据对象，移动到组件中。
3. 在您的循环中有item。Id，但您的项目只是一个普通字符串，它没有Id属性。要么将item更改为具有id属性的对象，要么直接使用循环中提供的index(不推荐)。
4. 传递你的物品作为道具，而不是胡子模板。在Todo中。用:item="item"
代替{{ item }}
5. 在你的ItemComponent中。如果您在属性中再次使用mustache语法。将value={{item }}更改为:value="item"

最后的代码是:

main.js

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

在App.vue:

<template>
<div id="app">
<todo></todo>
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<!--  <HelloWorld msg="Hello Vue in CodeSandbox!" /> -->
</div>
</template>
<script>
import Todo from './components/Todo.vue';
export default {
name: "App",
components: {
Todo,
},
};
</script>

在Todo.vue:

<template>
<div>
<input type="text" v-model="nameme" />
<button type="click" @click="assignName">Submit</button>
<div v-for="(item, index) in result" :key="index">
<itemcomponent :item="item"></itemcomponent>
</div>
</div>
</template>

<script>
import { itemcomponent } from "./itemComponent";
export default {
props:['item'],
data() {
return {
nameme: "",
upernameme: "",
result: [],
};
},
methods: {
assignName: function () {
this.upernameme = this.nameme.toUpperCase();
this.result.push(this.nameme);
this.nameme = "";
},
},
components: {
itemComponent,
}
};
</script>

itemComponent.vue:

<template>
<div>
<input type="text" :value="item"/>
</div>
</template>

<script>
export default {
props: {
item: String,
},
data() {
return {};
},
};
</script>