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>