💻博主现有专栏：

                C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

                Y小夜-CSDN博客

目录

🎯本文目的

🎯实现一个“投票”

🎃要求

🎃打开App.vue文件添加代码

🎃实现投票人图片下面按钮的投票功能

🎃运行效果

🎯实现一个“本周任务管理”

🎃要求

🎃创建 TodoList.vue组件，接收来自App.vue中todoList中的数据，并将数据渲染到表格中。(父组件向子组件传递数据)

🎃创建 TodoInput.vue组件，实现任务添加功能。(子组件向父组件传递数据)

🎯创建 TodoButton.vue组件，实现任务删选功能。(子组件向父组件传递数据)

🎃修改App.vue组件

🎃运行效果

---

🎯本文目的

(一)掌握vue项目中组件的注册与引用；

(二)掌握vue项目中组件之间的数据传递。

🎯实现一个“投票”

🎃要求

要求：1、掌握父组件向子组件传递数据的方法（利用组件的自定义属性）。

      2、掌握子组件向父组件传递数据的方法（利用组件的自定义事件）。

3、单击每位被投票人下面的按钮可以为其投票，在按钮后面显示当前的总票数，同时在页面下方显示每位投票人的详细信息，包括投票时间、投票人的姓名和总票数。

🎃打开App.vue文件添加代码

<template><div class="vote-wrapper"><h1>请为您最喜欢的人投票—</h1><ul><li v-for="item in list" v-bind:key="item.id"><div class="img"><img v-bind:src="item.avatar" v-bind:alt="item.name"></div><Greeting v-bind:to="item.name" @toupiao="onClick"></Greeting>    <!--引用greeting.vue组件--></li></ul><p v-for="(item, index) in appList" v-bind:key="index">{{item.time}} - {{item.name}} - {{item.count}}票</p></div>
</template><script setup>
import { reactive } from 'vue'import Greeting from './components/greeting.vue'    //导入并注册greeting.vue组件
const list = [{ id: 1, avatar: '/src/assets/images/jane.png', name: 'Jane' },{ id: 2, avatar: '/src/assets/images/mike.png', name: 'Mike' },{ id: 3, avatar: '/src/assets/images/kate.png', name: 'Kate' },{ id: 4, avatar: '/src/assets/images/tom.png', name: 'Tom' }
]
const appList = reactive([])   //存储投票信息
const onClick = (name, count) => {    //接收子组件传递过来的数据console.log(name, count)appList.push({ time: new Date().toLocaleTimeString(), name, count });
}
</script><style scoped>
.vote-wrapper {border: 1px solid #999;border-radius: 10px;width: 600px;margin: auto;
}.vote-wrapper h1 {text-align: center;
}ul {display: flex;justify-content: space-around;padding: 25px;border-top: 1px solid #999;margin: 0;
}li {list-style: none;text-align: center;
}li .img {width: 110px;border: 1px solid #999;border-radius: 10px;margin-bottom: 20px;
}li .img img {width: 100%;
}p {text-align: center;
}
</style>

        这段代码是一个Vue.js组件，用于创建一个投票页面。用户可以在这个页面上为四个候选人（Jane、Mike、Kate和Tom）进行投票。

        首先，我们来看一下HTML部分：

1. `<template>`标签内包含了整个投票页面的结构。
2. `<div class="vote-wrapper">`是投票页面的主要容器。
3. `<h1>`标签显示了投票的主题。
4. `<ul>`标签包含了四个候选人的信息。
5. `<li>`标签表示每个候选人的信息。
6. `<div class="img">`标签用于显示候选人的头像。
7. `<img>`标签用于显示候选人的头像图片。
8. `Greeting`组件用于显示候选人的名字和投票数。
9. `{{item.time}} - {{item.name}} - {{item.count}}票`用于显示投票的时间、候选人的名字和投票数。

        接下来，我们看一下JavaScript部分：

1. 导入了`reactive`函数，用于创建响应式数据。
2. 导入了`Greeting`组件。
3. 定义了一个名为`list`的数组，包含了四个候选人的信息。
4. 定义了一个名为`appList`的响应式数组，用于存储投票信息。
5. 定义了一个名为`(name, count)`的函数，用于接收子组件传递过来的数据。当用户投票时，这个函数会被调用，并将投票信息添加到`appList`数组中。

        最后，我们看一下CSS部分：

1. 定义了`.vote-wrapper`类的样式，包括边框、宽度等。
2. 定义了`h1`标签的样式，包括文本居中等。
3. 定义了`ul`标签的样式，包括布局、边框等。
4. 定义了`li`标签的样式，包括列表样式、文本居中等。
5. 定义了`.img`类的样式，包括宽度、边框等。
6. 定义了`img`标签的样式，包括宽度等。
7. 定义了`p`标签的样式，包括文本居中等。

总的来说，这段代码实现了一个简单的投票页面，用户可以为候选人进行投票，并查看投票结果。

🎃实现投票人图片下面按钮的投票功能

<template><button class="greeting" v-on:click="btn">{{to}}</button><span v-if="count > 0"> x {{ count }}</span></template><script setup>import { ref } from 'vue'const props=defineProps(['to'])        //声明自定义属性const emit = defineEmits(['toupiao'])    //声明自定义事件let count = ref(0)const btn = () => {if (count.value < 10) {count.value++;emit('toupiao',props.to, count.value);   //触发自定义事件时将数据传递}}</script><style scoped>.greeting {border: 1px solid #ccc;padding: 5px;border-radius: 5px;cursor: pointer;outline: none;margin-left: 10px;}</style>

        这段代码是一个Vue.js组件，用于创建一个带有投票功能的按钮。下面是对代码的详细解释和分析：

1. 模板部分（`<template>`）：
   - `<button class="greeting" v-on:click="btn">{{to}}</button>`：创建一个按钮元素，类名为"greeting"，点击时触发名为"btn"的方法。按钮上显示的内容为"{{to}}"，这是一个动态绑定的属性，表示按钮上的文字内容。
   - `<span v-if="count > 0"> x {{ count }}</span>`：创建一个条件渲染的`<span>`元素，当变量"count"的值大于0时才会显示。这个元素用于显示投票次数，其中"{{ count }}"是动态绑定的变量，表示投票次数。

2. 脚本部分（`<script>`）：
   - `import { ref } from 'vue'`：从Vue.js中导入ref函数，用于创建响应式数据。
   - `const props=defineProps(['to'])`：声明一个名为"props"的自定义属性，它接收一个数组作为参数，数组中的元素是该组件需要接收的外部传入的属性名。在这个例子中，只有一个属性"to"，用于设置按钮上的文字内容。
   - `const emit = defineEmits(['toupiao'])`：声明一个名为"emit"的自定义事件，它接收一个数组作为参数，数组中的元素是该组件可以触发的事件名。在这个例子中，只有一个事件"toupiao"，用于在投票时触发。
   - `let count = ref(0)`：使用ref函数创建一个响应式数据"count"，并将其初始值设置为0。这个变量用于记录投票次数。
   - `const btn = () => {...}`：定义一个名为"btn"的方法，用于处理按钮的点击事件。
     - `if (count.value < 10) {...}`：判断当前投票次数是否小于10，如果是，则执行以下操作：
       - `count.value++`：将投票次数加1。
       - `emit('toupiao',props.to, count.value)`：触发名为"toupiao"的自定义事件，并传递两个参数：props.to（按钮上的文字内容）和count.value（投票次数）。

3. 样式部分（`<style scoped>`）：
   - `.greeting {...}`：定义一个名为"greeting"的CSS类，用于设置按钮的样式。包括边框、内边距、圆角、光标样式、轮廓以及左边距等。

        这段代码的功能是创建一个带有投票功能的按钮，用户可以通过点击按钮进行投票，每次点击会增加投票次数，并且当投票次数小于10时会触发名为"toupiao"的自定义事件，并将按钮上的文字内容和投票次数作为参数传递给该事件。

🎃运行效果

🎯实现一个“本周任务管理”

🎃要求

要求：1、掌握组父子组件之间的数据传递和父子组件之间数据的同步。

      2、在文本框中输入任务，按下enter键或单击“添加新任务”，将新任务添加到列表下方。(TodoInput.vue向App.vue传递数据)

      3、选中任务前面的复选框，将显示该项目完成。(TodoList.vue向App.vue传递数据)

      4、单击“全部”、“已完成”和“未完成”按钮，任务列表中显示对应的任务。(用到了父子组件之间数据的同步)

🎃创建 TodoList.vue组件，接收来自App.vue中todoList中的数据，并将数据渲染到表格中。(父组件向子组件传递数据)

<template><ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id"><!-- 复选框 --><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" :id="item.id"v-model="item.done" /><label class="custom-control-label" :for="item.id":class="item.done ?'delete' :''">{{item.task }}</label></div><!-- badge 效果 --><span class="badge badge-success badge-pill"v-if="item.done">完成</span><span class="badge badge-warning badge-pill"v-else>未完成</span></li></ul></template>
<script setup>
const props=defineProps({// 表格的数据源list: {         //声明自定义属性type: Array,required: true,default: [],}
})        
</script><style scoped>
/* 为列表设置固定宽度 */
.list-group {
width: 700px;
}
/* 删除效果 */
.delete {
text-decoration: line-through;
}
</style> 

        这段代码是一个Vue.js组件，用于显示一个任务列表。每个任务都有一个复选框，用于标记任务是否完成。如果任务完成，任务文本会被划掉，并在任务旁边显示"完成"的徽章；如果任务未完成，任务文本不会被划掉，并在任务旁边显示"未完成"的徽章。

代码的主要部分包括HTML模板、JavaScript代码和CSS样式。

HTML模板：
- 使用`<ul>`元素创建一个无序列表，类名为"list-group"。
- 使用`v-for`指令遍历名为"list"的数组，为每个数组元素生成一个`<li>`元素。
- 在每个`<li>`元素中，使用`<div>`元素创建一个复选框，类名为"custom-control custom-checkbox"。复选框的状态由数组元素的"done"属性决定。
- 使用`<label>`元素显示任务文本，类名根据"done"属性的值决定是否添加"delete"类。
- 根据"done"属性的值，使用`v-if`和`v-else`指令在任务旁边添加"完成"或"未完成"的徽章。

JavaScript代码：
- 使用`defineProps`函数定义一个名为"list"的自定义属性，类型为数组，默认值为空数组。这个属性是组件的数据源。

CSS样式：
- 为"list-group"类设置固定宽度为700px。
- 为"delete"类设置文本装饰为划线，实现删除效果。

🎃创建 TodoInput.vue组件，实现任务添加功能。(子组件向父组件传递数据)

<template><!-- form 表单 --><form class="form-inline" @submit.prevent="onFormSubmit"><div class="input-group mb-2 mr-sm-2"><!-- 输入框的前缀 --><div class="input-group-prepend"><div class="input-group-text">任务</div></div><!-- 文本输入框 --><input  type="text" class="form-control" placeholder="请填写任务信息" style="width: 356px" v-model.trim="taskname"/></div><!-- 添加按钮 --><button type="submit" class="btn btn-primary mb-2">添加新任务</button></form></template><script setup>import { ref } from 'vue'const taskname = ref('')const emit = defineEmits(['add'])    //自定义事件// 表单提交的事件处理函数const onFormSubmit = () => {// 1. 判断任务名称是否为空if (!taskname.value) return alert("任务名称不能为空！");// 2. 触发自定义的 add 事件，并向外界传递数据emit('add', taskname.value)// 3. 清空文本框taskname.value = ''}</script>

        这段代码是一个Vue.js组件，用于创建一个表单，用户可以在其中输入任务名称并提交。

首先，我们来看一下HTML部分：

        这是一个表单，包含一个输入框和一个提交按钮。输入框用于输入任务名称，提交按钮用于提交表单。v-model.trim="taskname"表示输入框的值与taskname变量双向绑定，并且在输入时会自动去除前后的空格。

接下来，我们看一下JavaScript部分：

        首先，我们导入了ref函数，这是Vue.js提供的一个工具函数，用于创建响应式的数据。        

        然后，我们创建了一个名为taskname的响应式数据，初始值为空字符串。

        接着，我们定义了一个自定义事件add，这个事件可以在组件内部触发，并向外界传递数据。

        最后，我们定义了一个名为onFormSubmit的事件处理函数，这个函数会在表单提交时被调用。在这个函数中，我们首先判断任务名称是否为空，如果为空则返回错误信息。然后，我们触发了自定义的add事件，并向外界传递了任务名称。最后，我们将任务名称清空，以便下次输入。

🎯创建 TodoButton.vue组件，实现任务删选功能。(子组件向父组件传递数据)

<template><div class="button-container mt-3"><div class="btn-group"><button type="button" class="btn" :class="active === 0 ? 'btn-primary' : 'btn-secondary'"@click="btnClick(0)">全部</button><button type="button" class="btn" :class="active === 1 ? 'btn-primary' : 'btn-secondary'"@click="btnClick(1)">已完成</button><button type="button" class="btn" :class="active === 2 ? 'btn-primary' : 'btn-secondary'"@click="btnClick(2)">未完成</button></div></div>
</template>
<style scoped>
.button-container {width: 700px;text-align: center;
}
</style>
<script setup>
import { ref } from 'vue'
const active = ref(0)
const emit = defineEmits(['updateActive'])
const btnClick = (index) => {active.value = indexemit('updateActive', index)
}
</script>

        这段代码是一个Vue组件，用于创建一个包含三个按钮的按钮组。每个按钮都有一个点击事件，当点击时，会触发一个名为"updateActive"的事件，并将对应的索引值传递给该事件。

首先，我们来看一下模板部分：

        这是一个使用Bootstrap样式的按钮组，包含三个按钮。每个按钮都有一个`@click`事件监听器，当点击按钮时，会调用`btnClick`方法，并传递一个参数（0、1或2），分别代表"全部"、"已完成"和"未完成"这三个选项。按钮的样式会根据`active`的值动态改变，如果`active`等于按钮的索引值，那么按钮的样式为`btn-primary`，否则为`btn-secondary`。

接下来，我们看一下样式部分：

        这里定义了一个名为`.button-container`的样式类，设置了宽度为700px，文本居中对齐。

最后，我们看一下脚本部分：

        首先，我们从`vue`中导入了`ref`函数，用于创建响应式引用。然后，我们创建了一个名为`active`的响应式引用，初始值为0。接着，我们定义了一个名为`emit`的函数，用于触发自定义事件。最后，我们定义了一个名为`btnClick`的方法，当点击按钮时，会更新`active`的值，并触发名为"updateActive"的自定义事件，同时传递当前按钮的索引值。

🎃修改App.vue组件

<template><div><h1>本周任务管理</h1><hr /><TodoInput @add="onAddNewTask"></TodoInput><TodoList :list="tasklist"></TodoList> <!-- 使用TodoList组件 --><TodoButton :active="activeBtnIndex" @updateActive="changeActive"></TodoButton></div>
</template><script setup>
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue'      //导入并注册TodoList组件
import { reactive, ref,computed } from 'vue'
import TodoButton from './components/TodoButton.vue';
// 任务列表的数据
const todoList = reactive([{ id: 1, task: '周一早晨9点开会', done: false },{ id: 2, task: '周一晚上8点聚餐', done: false },{ id: 3, task: '准备周三上午的演讲稿', done: true },{ id: 4, task: '准备周四上午的课件', done: false },{ id: 5, task: '准备周五上午的实验指导', done: false },
]
)
const nextId = ref(6)   //下一条数据的id值
const onAddNewTask = (tname) => {// 1. 向任务列表中新增任务信息todoList.push({id: nextId.value,task: tname,done: false, // 完成状态默认为 false});// 2. 让 nextId 自增+1nextId.value++;
}
const activeBtnIndex = ref(0)     //用来接收子组件传过来的数据，注意ref需按需导入
const changeActive = (status) => {console.log(status)activeBtnIndex.value = status   // 将子组件的状态赋值给父组件
}
// 根据激活按钮的索引值，动态计算要展示的列表数据
const tasklist=computed(()=>{// 对“源数据”进行 switch...case 的匹配，并返回“计算之后的结果”switch (activeBtnIndex.value) {case 0: // 全部return todoList;case 1: // 已完成return todoList.filter((x) => x.done);case 2: // 未完成return todoList.filter((x) => !x.done);}
})
</script>

        这段代码是一个Vue.js的组件，用于实现一个简单的任务管理功能。主要包含三个子组件：TodoInput、TodoList和TodoButton。

1. TodoInput组件：用于输入新的任务。当用户输入新任务并点击添加按钮时，会触发onAddNewTask方法，将新任务添加到任务列表中。

2. TodoList组件：用于展示任务列表。它接收一个名为list的属性，该属性的值是一个数组，包含了所有的任务信息。

3. TodoButton组件：用于切换任务列表的显示状态。它接收两个属性，一个是active，表示当前激活的按钮索引；另一个是updateActive，当用户点击按钮时，会触发这个方法，更新父组件中的activeBtnIndex值。

        在父组件中，定义了一个响应式数组todoList，用于存储所有的任务信息。同时，定义了一个ref类型的变量nextId，用于生成新任务的id。定义了一个computed类型的变量tasklist，根据activeBtnIndex的值，动态计算要展示的任务列表。

        当用户点击TodoButton组件的按钮时，会触发changeActive方法，更新activeBtnIndex的值，从而改变tasklist的值，实现了任务列表的动态展示。

🎃运行效果