1.准备
2.以上简写代码更改如下:页面显示效果一致
3.在结构中添加双向数据绑定和点击事件
4.在点击事件中往数组中添加元素即可
最终实现效果:
父组件向子组件传值总结:使用子组件的使用,使用v-bind的形式,把一个值传给自组件.
需求:当我们点击下面的li标签的内容,就删除当前的li(这就用到了子组件向父组件进行传值了)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>todolist开发</title><script src="./00-vue.js"></script></head><body><div id="app"><input type="text" v-model="inputValue" /><button @click="addContent">提交</button><ul><my-component:content="item":index="index"v-for="(item,index) in list"@delete="handleItemDelete"></my-component></ul></div></body>
</html>
<script>/* 需求:点击哪个就删除哪个li标签.步骤:因为我们的数据放在父组件的Vue的data里,最终删除的也是这里的数据
1.在子组件模板中添加点击事件handleItemClick
2.在子组件中的methods方法中写上这个事件
3.使用this.$emit触发delete事件:this.$emit('delete')
4.在html中监听这个delete事件handleItemDelete
5.在父组件中写这个handleItemDelete事件
6.接收传过来的索引方法:html中绑定index方法,在子组件中的props接收过来,在子组件的$emit中传入索引,在父组件中的handleItemDelete函数中,接收这个索引*/let MyComponent = {props: ['content', 'index'], //父组件(list)向子组件(每个li)传值template: '<li @click="handleItemClick">{{content}}</li>',methods: {handleItemClick: function() {this.$emit('delete', this.index)}}}let app = new Vue({el: '#app',components: {MyComponent: MyComponent},data: {list: [],inputValue: ''},methods: {addContent() {this.list.push(this.inputValue);this.inputValue='';},handleItemDelete: function(index) {// alert(index)this.list.splice(index, 1)}}})
</script>实现效果:
(接下来会有总结二,未完待续)
本文发布于:2024-01-29 07:20:49，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170648405413639.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
