Vue中父子组件之间信息的交互

最新推荐文章于 2021-10-19 19:03:46 发布

永远热爱夏天的风

最新推荐文章于 2021-10-19 19:03:46 发布

阅读量159

点赞数

分类专栏：日常学习日常分享总结记录

本文链接：https://blog.csdn.net/pillow233/article/details/100895253

版权

日常学习同时被 3 个专栏收录

55 篇文章 1 订阅

订阅专栏

日常分享

22 篇文章 1 订阅

订阅专栏

总结记录

19 篇文章 0 订阅

订阅专栏

Vue中父子组件之间信息的交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="learn"/>
        <button @click="sub">提交</button>
    </div>
    <ul>
        <todo-item
                v-for="(item,index) of list"
                :key="index"
        <!--父组件通过属性的方式向子组件传递数据-->
        :learn="item"
        :index="index"
        
        @delete="handle"
        >
        </todo-item>
    </ul>
</div>

<script>
    Vue.component('todo-item', {
        //接收传递的数据
        props: ['learn', "index"],
        template: '<li @click="test1">{{learn}}</li>',
        methods: {
            test1: function () {
                //子组件通过发布事件，父组件通过监听，已达成子组件向父组件传递信息的功能
                this.$emit('delete', this.index);
            }
        }
    })
    new Vue
    ({
        el: "#root",
        data: {
            learn: '',
            list: []
        },
        methods: {
            sub: function () {
                this.list.push(this.learn);
                this.learn = '';
            },
            handle: function (index) {
                this.list.splice(index, 1);
            }
        }

    })
</script>
</body>
</html>

永远热爱夏天的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中父子组件之间信息的交互

Vue中父子组件之间信息的交互<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门</title> <script src="vue.js"></script></head...
复制链接

扫一扫

专栏目录