Vue父组件与子组件之间传值

最新推荐文章于 2024-04-14 23:34:00 发布

wenhuixl

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： Vue

本文链接：https://blog.youkuaiyun.com/qq_31519989/article/details/99175409

Vue学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的TodoList应用，展示了如何通过props和$emit进行父组件与子组件之间的数据传递与事件触发。子组件通过props接收数据，并在点击事件中通过$emit向父组件发送事件，父组件监听事件并更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue父组件与子组件之间传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
</head>
<script src="./vue.js"></script>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="submit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item, index) of list" :content="item" :key="index" :index="index" @myevent="doDelete"></todo-item>
        </ul>
    </div>
    <script>
        // 全局组件
        Vue.component('todo-item', {
            props: ['content', 'index'], // 接收属性值
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function () {
                    this.$emit('myevent', this.index);
                }
            }
        })

        new Vue({ // 创建实例
            el: '#root', // 挂载点
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                submit: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                doDelete: function (index) {
                    console.log(index);
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述