上一章节实现的是静态页面的设计、这一章节实现将数据抽取出来、通过组件间参数的传递来实现
上一章节链接地址：https://blog.csdn.net/weixin_43304253/article/details/126218585
文章目录
- 1、组件之间是怎样实现参数传递的？（基本的传递方式）
-
- 1.1、思路流程
- 1.2 、代码流程（有点简陋）
- 1.3 代码（这里只给出主要部分代码、详细代码请看上一章节）
-
- 1.3.1 App.vuepp.vue(省略了样式)
- 1.3.2 TheList.vue (省略了样式)
- 1.3.3 TheItem.vue(省略了样式)
- 1.4 、实现的效果
1、组件之间是怎样实现参数传递的？（基本的传递方式）
1.1、思路流程
1、将数据从App.vue中传入TheList.vue组件中。
- 2、在
TheList.vue组件中、通过遍历的形式遍历数组对象、每次遍历出来的对象作为参数传入TheItem.vue组件中 - 3、
TheItem.vue接收到传来的参数就可以展示对象中的属性
1.2 、代码流程（有点简陋）
1.3 代码（这里只给出主要部分代码、详细代码请看上一章节）
1.3.1 App.vuepp.vue(省略了样式)
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<TheHeader />
<TheList :todos="todos" />
<TheFooter />
</div>
</div>
</div>
</template>
<script>
import TheHeader from "./components/TheHeader";
import TheList from "./components/TheList";
import TheFooter from "./components/TheFooter.vue";
export default {
name: "App",
components: { TheHeader, TheList, TheFooter },
data() {
return {
//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
todos: [
{ id: "001", title: "吃饭", done: true },
{ id: "002", title: "睡觉", done: false },
{ id: "003", title: "打豆豆", done: true },
],
};
},
methods: {},
};
</script>
1.3.2 TheList.vue (省略了样式)
<template>
<ul class="todo-main">
<TheItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" />
</ul>
</template>
<script>
import TheItem from "./TheItem";
export default {
name: "TheList",
components: { TheItem },
//声明接收App传递过来的数据，其中todos是自己用的
props: ["todos"],
};
</script>
1.3.3 TheItem.vue(省略了样式)
<template>
<li>
<label>
<input type="checkbox" />
<span>{
{todo.title}}</span>
</label>
<button>删除</button>
</li>
</template>
<script>
export default {
name: "MyItem",
//声明接收todo、checkTodo、deleteTodo
props:['todo'],
data() {},
methods: {},
};
</script>
1.4 、实现的效果
