vue2.0学习笔记（七）：深刻理解Vue中的组件（2）--进阶篇

深刻理解Vue中的组件（2）--进阶篇github链接 （demo05持续更新中）

学习了基本的组件构成，来写一个简单的小demo,学生信息的收集功能，首先页面分成了三种不同的组件：分别是 demo05 、CommentInput、CommentList。
CommentInput
CommentInput负责收集数据，并传递给父组件demo05 ，通过双向数据绑定(v-model)，收集学生姓名、学生学号、学生个人信息

<template>
    <div class="com-input">
        学生姓名：
        <input type="text" v-model="userName">
        <br> 学生学号：
    <input type="text" v-model="userCode">
    <br> 学生个人信息：
    <textarea name="" id="" cols="30" rows="10" v-model="userInfo"></textarea>
    <br>
    <el-button round @click="_handleClick()">圆角按钮</el-button>
</div>

点击时，传递给父组件

    methods: {
        //点击按钮 通过 emit ,把数据传递给父组件 demo05
        _handleClick() {
            let params = {
                userName: this.userName,
                userCode: this.userCode,
                userInfo: this.userInfo
            };
            this.$emit('sendMsg',params)
        }
    },

demo05

demo05作为父组件，用于接收学生信息，并传递给CommentList

<template>
    <div class="hello">
        {{msg}}

        <div class="submit-box">
            <!--上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。-->
            <comment-input  @sendMsg="_handleInputMsg"/>
            <!--下面部分是评论列表-->
            <comment-list :message="comList" @delInfo="_delInfoList"/>
        </div>
    </div>
</template>

CommentList
CommentList通过props接受从父组件中传递的信息，并通过（v-for）展示在页面中。

<template>
    <div class="hello">
        <ul>
            <li v-for="(item,index) in message" :key="item.id">{{item.userName}}--{{item.userCode}}--{{item.userInfo}} <span @click="_handleDel(index)">删除</span></li>
        </ul>
    </div>
</template>

添加一个删除功能，把索引值（index）传递给父组件

    _handleDel(index) {
        this.$emit('delInfo', index)
    }

这样通过父组件与子组件之间的参数传递，就实现了学生信息收集与删除功能

demo05源码

<template>
    <div class="hello">
        {{msg}}

        <div class="submit-box">
            <!--上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。-->
            <comment-input  @sendMsg="_handleInputMsg"/>
            <!--下面部分是评论列表-->
            <comment-list :message="comList" @delInfo="_delInfoList"/>
        </div>
    </div>
</template>
<script>
    import commentInput from './children/CommentInput.vue';
    import commentList from './children/CommentList.vue';
    export default {
        name: "Demo05",
        data() {
            return {
                msg: "demo05 -- 深刻理解Vue中的组件（2）--进阶篇",
                comList:[
                    
                ]
            };
        },
        created() {},
        mounted: function() {
            this.$nextTick(function() {
                
            });
        },
        components: {
            commentInput,
            commentList
        },
        methods: {
            //从子组件 CommentInput 获取 采集数据，再传递给 子组件 CommentList 
            _handleInputMsg(data) {
                this.comList.push(data);
            },
            //从子组件 CommentList 获取 index ,删除 this.comList 中的数据
            _delInfoList(index){
                this.comList.splice(index, 1)
            }
        }
    };
</script>
<style scoped lang="less">
    .submit-box{
        min-height: 600px;
        width: 700px;
        border: 1px solid #cccccc;
    }
</style>

commentInput源码

<template>
    <div class="com-input">
        学生姓名：
        <input type="text" v-model="userName">
        <br> 学生学号：
        <input type="text" v-model="userCode">
        <br> 学生个人信息：
        <textarea name="" id="" cols="30" rows="10" v-model="userInfo"></textarea>
        <br>
        <el-button round @click="_handleClick()">圆角按钮</el-button>
    </div>
</template>

<script>
    export default {
        name: "Demo01",
        data() {
            return {
                userName: '',
                userCode: '',
                userInfo: ''
            };
        },
        created() {},
        methods: {
            //点击按钮 通过 emit ,把数据传递给父组件 demo05
            _handleClick() {
                let params = {
                    userName: this.userName,
                    userCode: this.userCode,
                    userInfo: this.userInfo
                };
                this.$emit('sendMsg',params)
            }
        },
        mounted: function() {
            this.$nextTick(function() {
    
            });
        },
    };
</script>

<style scoped lang="less">
    .com-input {
        border-bottom: 1px slateblue solid;
    }
</style>

CommentList源码

<template>
    <div class="hello">
        <ul>
            <li v-for="(item,index) in message" :key="item.id">{{item.userName}}--{{item.userCode}}--{{item.userInfo}} <span @click="_handleDel(index)">删除</span></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Demo01",
        data() {
            return {
                person: {
    
                }
            };
        },
        created() {},
        //从demo05 父组件中获取 数据，并展示
        props: ['message'],
        methods: {
            
            _handleDel(index) {
                this.$emit('delInfo', index)
            }
        },
        mounted: function() {
            this.$nextTick(function() {
    
            });
        },
    };
</script>

<style scoped lang="less">
    .hello {
        height: 200px;
        h2 {
            background: #dcdc3e;
        }
    }
</style>