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

接上一篇：（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>