首页 > 其他分享> > 简单的同级父子组件通信实现listItem

简单的同级父子组件通信实现listItem

2019-03-20 08:53:53 作者：互联网

紧接着我们上一笔记，这里我们来讲一下简单的父子组件问题，不过这里是同级内的
我们来实现一个在输入框中输入内容，点击提交则将其展示在页面列表中，点击Item列表中的内容，则将其删除。前一部分是父组件向子组件通信，后一部分是子组件向父组件通信。

<!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>同级内父子组件之间通信</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handerClick">提交</button>
        <!-- 2.这里我们使用v-bind简写为":"去接收父组件的值，也就是将item通过v-bind方法借助content变量去传给我们创建的子组件list-item，也可以叫绑定 -->
        <list-item 
            :content="item"
            :index="index" 
            v-for="(item,index) in list"
            @delete="HanderDeleteItem"
        >
        </list-item>
    </div>
 
    <script>
        // 声明一个局部组件
        var ListItem = {
            // 接收父组件传递的值
            props: [
                'content',
                // 接收父组件通过index变量传递过来的值（这里是item的下标）
                'index'
            ],
            template: '<li @click="HanderItemDelete">{{content}}</li>',
            methods:{
                HanderItemDelete: function(){
                    // 这是个重点啊，这是子组件将东西传递给父组件的函数，$emit,通过detele变量去让父组件去监听，这里我们传递一个点击的item下标
                    this.$emit('delete',this.index)
                }
            }
        }

        var app = new Vue({
            el: '#app',
            // 注册局部组件,这里是components哦
            components: {
                ListItem: ListItem
            },
            data:{
                list: [],
                inputValue: ''
            },
            methods: {
                handerClick:function(){
                    //将输入框内容添加到list数组中
                    app.$data.list.push(this.inputValue);
                    //每次添加结束以后我们就将输入框中的内容清空
                    this.inputValue='';
                },
                HanderDeleteItem:function(index){
                    // alert(index)
                    // 从数组中删除,使用splice函数
                    this.list.splice(index,1)
                }
            },
        })
    </script>
</body>
</html>

VUE.js可以引入本地的包，或者采用CDN的方式哦

标签：同级,index,app,list,输入框,ListItem,组件,listItem
来源： https://blog.csdn.net/qq_38912284/article/details/88679601