接上一篇：（vue基础试炼_04）使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256

文章目录

一、上篇回顾
- ① 代码欣赏
- ② 代码分析
二、子组件如何向父组件传值呢？
- ① 需求案例文档
- ② 需求案例效果图
- ③ 思考与思路
- ④ 页面验证是否生效
三、删除与数据
- ① 点击对应的内容，然后删除，又应该怎样做呢？
- ② 删除思路
- ③ 模拟删除
- ④角标删除
- ⑥ 父子传值总结
- ⑦ 指令简写

一、上篇回顾

① 代码欣赏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用组件改造TodoList</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="root"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-for="item in list"></todo-item></ul>
</div><script>/*创建一个局部组件 TodoItem*/var TodoItem = {props: ['content'],template: "<li>{{content}}</li>"}/*创建了一个vue实例*/var app = new Vue({el: '#root',/*通过对象来注册局部组件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''}}});
</script>
</body>
</html>

② 代码分析

序号	说明
①	最外层的父组件就是Vue实例
②	id等于root的div内容，其实就是最外层Vue实例父组件的模板
③	我们创建了一个子组件TodoItem子组件
④	通过`todo-item`标签的形式，使用了这个子组件
⑤	父组件给子组件传值

通过上一篇，大家已经学会了父组件给子组件传值这种方式。
通过v-bind指令将list循环出来的每一项的值item，借助content变量传递todo-tem子组件，子组件通过 props: [‘content’],来接收父组件传递过来的参数值，最后，在模板中通过插值表达式渲染到页面上进行展示！

二、子组件如何向父组件传值呢？

① 需求案例文档

点击列表中的任意一项，进行数据删除

② 需求案例效果图

③ 思考与思路

这个需求中涉及到了子组件向组件传值的相关知识点了
既然是在子组件中点击内容做的操作，那就给子组件绑定一个事件，当点击事件时，在做逻辑操作即可。

步骤	说明
①	在子组件中绑定一个handleItemClick
②	在子组件的methods下面写handleItemClick 的方法

④ 页面验证是否生效

三、删除与数据

① 点击对应的内容，然后删除，又应该怎样做呢？

② 删除思路

数据在哪存放着呢？父组件的list数组中，父组件决定子组件显示多少个，所以，删除子组件的时候，我们需要点击子组件，子组件把对应的内容传给父组件，让父组件去改变数据，父组件的数据改变了，子组件就会减少或者增加，那具体应该怎样操作呢？
子组件向父组件传值，我们通过this.$emit('delete')向外触发事件

简述：当我点击子组件时，子组件向外触发一个delete事件，那么，我在父组件里面，创建子组件的同时，可以监听这个delete事件。

一旦删除事件被触发的时候，就会执行父组件中的handleItemDelete这个方法，因此，我们需要在父组件的methods中定义handleItemDelete这个方法。

③ 模拟删除

下面，我们需要做的就是改变list中的数据即可
先让list等于空数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用组件改造TodoList</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="root"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-for="item in list"@delete="handleItemDelete"></todo-item></ul>
</div><script>/*创建一个局部组件 TodoItem*/var TodoItem = {props: ['content'],template: "<li @click='handleItemClick'>{{content}}</li>",methods: {handleItemClick: function () {// alert('click')this.$emit('delete');}}}/*创建了一个vue实例*/var app = new Vue({el: '#root',/*通过对象来注册局部组件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''},handleItemDelete: function () {// alert('click');this.$data.list = []}}});
</script>
</body>
</html>

④角标删除

删除是实现了但是，删除了所有，那怎样删除指定的内容呢？如果获取内容的角标就好了，我们就可以根据角标删除。
当父组件箱子组件传值的时候，不能只传content，在传一个内容的下标，在子组件中再添加一个下标index，等会作为删除的角标；当父组件传递下标时也许要在子组件中接收。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用组件改造TodoList</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="root"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-bind:flag="index"v-for="(item,index) in list"@delete="handleItemDelete"></todo-item></ul>
</div><script>/*创建一个局部组件 TodoItem*/var TodoItem = {props: ['content', 'flag'],template: "<li @click='handleItemClick'>{{content}}</li>",methods: {handleItemClick: function () {// alert('click')this.$emit('delete', this.flag);}}}/*创建了一个vue实例*/var app = new Vue({el: '#root',/*通过对象来注册局部组件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue);this.inputValue = ''},handleItemDelete: function (flag) {// alert(flag);// this.$data.list = []this.list.splice(flag, 1)}}});
</script>
</body>
</html>

⑥ 父子传值总结

父组件给子组件传值：通过v-bind借助变量给子组件传值，子组件要在props中进行接收
子组件给父组件传值：我们通过$emit向上触发事件，子组件触发的事件，父组件恰好在监听，接收监控后，父组件就可以接收到子组件传递过来的内容，来实现子组件相符组件传值的功能。

⑦ 指令简写

指令	简写
v-on:	@
v-bind:	:

（vue基础试炼_05）简单组件之间的传值相关推荐

（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
前端开发：组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用
前言在前端开发的时候,处理数据.传递数据是非常常用的操作方式,也是前端开发工作中非常重要的部分.尤其是在前端开发过程中的组件之间的数据传递,是必用操作.那么本篇博文就来分享一下在前端开发的时候,对于 ...
Vue学习——组件基础之父子组件之间的传值
一.父组件向子组件传值作用:因为在Vue的组件化开发中页面的各个功能模块对应各个组件,组件之间的传值变得尤为重要. 举例:父组件相当于导航栏,子组件相当于点击导航栏之后显示对应的内容界面:点击导航栏 ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...
（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...

（vue基础试炼_05）简单组件之间的传值