VUE2.0学习记录——父子组件传值

最新推荐文章于 2023-01-12 09:37:48 发布

一缕清风007

最新推荐文章于 2023-01-12 09:37:48 发布

阅读量134

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/baokx/article/details/98742020

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Vue.js构建的TodoList应用，通过点击item删除项目，展示了子组件如何向父组件传递数据。文章详细解释了如何使用v-model进行双向数据绑定，以及如何通过v-on监听事件并调用方法。

摘要由CSDN通过智能技术生成

返回导航页

通过实现点击item删除TodoList中的项目，理解子组件往父组件的传值

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
</head>
<body>
<div id="app">
    <!-- v-model:双向数据绑定-->
    <input type="text" v-model="inputValue"/>
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <todo-item v-bind:content="item"
                   v-bind:index="index"
                   v-for="(item,index) in list"
                   @delete="handleItemDelete"
        >
        </todo-item>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var TodoItem = {
        props: ['content','index'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods: {
            handleItemClick: function () {
                this.$emit("delete",this.index);
            }
        }
    };

    var app = new Vue({
        el: '#app',
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleItemDelete: function (index) {
                this.list.splice(index, 1);
            }
        }
    });
</script>
</html>