Vue父子组件传值，自定义组件实现TodoList

最新推荐文章于 2022-04-20 23:31:32 发布
最新推荐文章于 2022-04-20 23:31:32 发布
阅读量347 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqiitan/article/details/98063557
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click='addItem'>提交</button>
       <!-- <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>-->
        <ul>
            <todo-item 
                v-for="(item, index) in list" 
                :index='index'
                :content="item"
                @delete="handleItemDelete"></todo-item>
        </ul>
    </div>
    <script>
        //Vue.component("TodoItem", {
        //    props: ['content'],
        //   template: "<li>{{content}}</li>"
        //})
        // 子组件定义
        var TodoItem = {
            // 接收参数
            props: ['content', 'index'],
            template: "<li @click='itemClick'>{{content}}</li>",
            methods: {
                itemClick() {
                    // 把index作为参数，带给父组件
                    this.$emit("delete", this.index)
                }
            }    
        }
        var app = new Vue({
            el: '#app',
            components: {
                TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                addItem() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete(index) {
                    console.log("handleItemDelete", index)
                    // 从list数组中删除index坐标开始1个元素。
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>

 

xqiitan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
Vue-TodoList（父子组件传值）
weixin_45497246的博客
03-20 251
在组件的模板里绑定点击事件handleItemClick,props接收content和index两个变量 在组件的methods里声明handleItemClick方法，并用$emit触发当前实例上的事件，附加参数index传给监听器delete回调。 在组件标签里添加监听事件delete 在vue实例methods里声明delete方法(传参数index),利用splice（）方法，从当前下...
vue父子组件通信(以实现一个todoList为例子)
Selenium
10-04 317
话不多说,先上todoList效果与完整代码. 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
vue商品列表页面组件父子组件传值的应用——代码复用性
bentou_的博客
03-30 718
vue商品列表页面获组件父传子的应用 写前端页面时很多时候我们会遇到一种很多页面的架构都差不多，只需要标题变一变就可以的情况，比如说下图这个分类列表，我们以教育培训类和互联网运营类两个列表请求页面为例。 这两页面只有标题稍稍不同，当然请求地址的参数也不尽相同。 1、我们先试试怎么让这个标题组件通过父传子得到复用。 首先熟悉一下父子组件：job11和job12是父组件，在这里相当于是教育培训类和...
vue自定义组件及父子控件之间的传值
yu240956419的博客
04-20 337
vue 全局组件，局部组件，模板组件的定义及父子组件之间的传值
Vue父子模版传值及组件传值的三种方法
08-28
在Vue.js中，父子组件之间的通信是通过不同的方式实现的。本文将介绍三种常见的父子模板传值及组件传值的方法，适用于Vue 1.0版本。对于Vue 2.0及更高版本，官方文档提供了更详尽的指南，推荐查阅官方文档以获取最新...
vue父子组件传值案例
04-26
在这个“vue父子组件传值案例”中，我们将深入探讨Vue 2.x版本中的父子组件通信机制，包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中，父组件向子组件传递数据...
vue3父子组件传值.doc
02-05
本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. `defineProps`: 接收父组件传递的数据 在Vue3中，父组件向子组件传递...
vue父组件如何向子组件中传递数据？
weixin_33873846的博客
05-15 397
原文地址 props传参 父组件： <template> <parent> <child :list="list"></child> //在这里绑定list对象 </parent> </template>import child from 'child.vue'; ...
Vue表单类的父子组件数据传递示例
08-27
本篇文章主要介绍了Vue表单类的父子组件数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用Vue父子组件通信实现todolist的功能示例代码
10-17
主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue实现ToDoList简单实例
08-31
主要为大家详细介绍了vue实现ToDoList简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中父子组件通讯之todolist组件功能开发
08-27
主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
VUE入门之父子组件间相互传值实现todolists
gisercug的博客
07-03 341
父组件向子组件传值使用props 子组件向父组件传值使用emit 父组件todolists.vue <template> <div id="root"> <div> <input v-model="inputValue"/> <button @click="handSubmit">提交&...
Vue实现TodoList的方式：第三版——父子组件传参，组件化emit实现
niTaoTaoa的博客
05-05 235
父组件 <template> <div id="app" style="border:solid 2px black" > <div id="nav"> <router-link to="/home">进入主页</router-link> <div> &...
用Vue的父子组件通信实现todolist的功能
weixin_30270561的博客
04-11 106
先上代码 <body> <div id="root"> <div> <input v-model="inputValue" /> <button @click="handleClick">submit</button> &l...
Vue训练营-自定义组件
小一的专栏
04-21 2831
项目截图GitHub地址由于这次作业比较简单,所以代码集成到上次的TodoList的项目中.主界面通过路由进行界面切换.技术点只要技术点包括: Vue自定义组件 Vue组件间通信 自定义组件就不多说了,直接看官网即可.Vue组件间通信方式包括： 父->子,使用props传值. 子->父,使用emit,emit,on发送和监听事件. 兄弟组件,使用Bus(即new Vue)进行组件间通信. 进阶,使用
vue3的todoList案例
weixin_45956230的博客
09-27 937
vue3的练习demo 1、todo.vue 父组件 <template> <!--子传父用自定义事件，父传子用自定义属性--> <todo-header @addTask="addTask"></todo-header> <todo-list :arrTask="arrTask" @delTask="delTask"></todo-list> </template> <script> //引入两
vue 父子组件传值
最新发布
04-26
Vue是一种流行的JavaScript框架，用于构建用户界面。在Vue中，父子组件之间传递数据是一种常见的需求。以下是一种常用的方法来实现父子组件之间的数据传递： 1. Props（属性）：父组件可以通过props属性向子组件传递数据。在父组件中，通过在子组件标签上绑定属性的方式传递数据。在子组件中，可以通过props选项接收并使用这些数据。 父组件： ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } } </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> ``` 2. $emit（自定义事件）：子组件可以通过$emit方法触发自定义事件，并将需要传递的数据作为参数传递给父组件。在父组件中，通过在子组件标签上监听自定义事件的方式接收数据。 父组件： ```html <template> <div> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(data) { console.log(data); // 在这里处理子组件传递的数据 } } } </script> ``` 子组件： ```html <template> <div> <button @click="emitEvent">触发事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('child-event', 'Hello from child component'); // 触发自定义事件，并传递数据给父组件 } } } </script> ``` 以上是Vue中实现父子组件之间传递数据的两种常用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值