VUE框架CLI组件化动态三层传递实现修改选中状态------VUE框架

<template>
    <div>
        <BugHeader :saveBugCallBack="saveBugCallBack"></BugHeader>
        <BugList :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack"></BugList>
        <BugFooter></BugFooter>
    </div>
</template>

<script>
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter},
    data(){
        return {
            bugList : [
                {id : 1,desc : "Bug描述信息100",resolved : true},
                {id : 2,desc : "Bug描述信息200",resolved : false},
                {id : 3,desc : "Bug描述信息300",resolved : true},
            ]
        }
    },
    methods : {
        // 因为我们不能直接动props的数据
        // 那我们就传递一个方法过去进行修改
        saveBugCallBack(bug){
            this.bugList.unshift(bug);
        },
        modifyResolvedCallBack(id)
        {
            this.bugList.forEach((bug) => {
                if(bug.id === id){
                    bug.resolved = !bug.resolved;
                }
            });
        }

    }
}
</script>

<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>

<template>

    <div>

        <BugHeader :saveBugCallBack="saveBugCallBack"></BugHeader>

        <BugList :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack"></BugList>

        <BugFooter></BugFooter>

    </div>

</template>

<script>

import BugHeader from "./components/BugHeader.vue";

import BugList from "./components/BugList.vue";

import BugFooter from "./components/BugFooter.vue";

export default {

    name : "App",

    components : {BugHeader,BugList,BugFooter},

    data(){

        return {

            bugList : [

                {id : 1,desc : "Bug描述信息100",resolved : true},

                {id : 2,desc : "Bug描述信息200",resolved : false},

                {id : 3,desc : "Bug描述信息300",resolved : true},

            ]

        }

    },

    methods : {

        // 因为我们不能直接动props的数据

        // 那我们就传递一个方法过去进行修改

        saveBugCallBack(bug){

            this.bugList.unshift(bug);

        },

        modifyResolvedCallBack(id)

        {

            this.bugList.forEach((bug) => {

                if(bug.id === id){

                    bug.resolved = !bug.resolved;

                }

            });

        }

    }

}

</script>

<style>

.button{

    display: inline-block inline;

    zoom: 1;

    padding: 6px 20px;

    margin: 0;

    cursor: pointer;

    border: 1px solid #bbb;

    overflow: visible;

    font: bold 13px arial, helvetica, sans-serif;

    text-decoration: none;

    white-space: nowrap;

    color: #555;

    background-color: #ddd;

    background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    -webkit-transition: background-color .2s ease-out;

    -moz-transition: background-color .2s ease-out;

    -ms-transition: background-color .2s ease-out;

    -o-transition: background-color .2s ease-out;

    transition: background-color .2s ease-out;

    background-clip: padding-box; /* Fix bleeding */

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    text-shadow: 0 1px 0 rgba(255,255,255, .9);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.button:active{

    background: #e9e9e9;

    position: relative;

    top: 1px;

    text-shadow: none;

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.red{

    color: #fff;

    text-shadow: 0 1px 0 rgba(0,0,0,.2);

    background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

}

.button.red{

    background-color: #ca3535;

    border-color: #c43c35;

}

.button.red:hover{

    background-color: #ee5f5b;

}

.button.red:active{

    background: #c43c35;

}

.button.green{

    background-color: #57a957;

    border-color: #57a957;

}

.button.green:hover{

    background-color: #62c462;

}

.button.green:active{

    background: #57a957;

}

</style>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选<input type="checkbox"/></th>
                    <th>bug描述</th>
                    <th class="c2"></th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :modifyResolvedCallBack="modifyResolvedCallBack"></BugItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import BugItem from "./BugItem.vue";
export default {
    name : "BugList",
    components : {BugItem},
    props : ["bugList","modifyResolvedCallBack"]
}
</script>

<style scoped>
/* list */
table{
	width: 760px;
	border-collapse: collapse;
}
table caption{
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}
.c1,.c2{
	width: 100px;
}
th {
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
table thead tr{
	background-color: #008c8c;
	color: #fff;
}
</style>

<template>

    <div>

        <table>

            <thead>

                <tr>

                    <th class="c1">全选<input type="checkbox"/></th>

                    <th>bug描述</th>

                    <th class="c2"></th>

                </tr>

            </thead>

            <tbody>

                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :modifyResolvedCallBack="modifyResolvedCallBack"></BugItem>

            </tbody>

        </table>

    </div>

</template>

<script>

import BugItem from "./BugItem.vue";

export default {

    name : "BugList",

    components : {BugItem},

    props : ["bugList","modifyResolvedCallBack"]

}

</script>

<style scoped>

/* list */

table{

    width: 760px;

    border-collapse: collapse;

}

table caption{

    font-size: 1em;

    font-weight: bold;

    margin: 1em 0;

}

.c1,.c2{

    width: 100px;

}

th {

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

table thead tr{

    background-color: #008c8c;

    color: #fff;

}

</style>

<template>
    <tr>
            <td><input type="checkbox" :checked="bug.resolved" @change="$event => modifyResolved(bug.id)"></td>
            <td>{{ bug.desc }}</td>
            <td><button class="samll red button">删除</button></td>
    </tr>
</template>

<script>
export default {
    name : "BugItem",
    props : ['bug',"modifyResolvedCallBack"],
    methods : {
        modifyResolved(id){
            this.modifyResolvedCallBack(id);
        }
    }
}
</script>

<style scoped>
/* item */
table tbody tr:nth-child(odd){
	background-color: #eee;
}
table tbody tr:hover{
	background-color: #ccc;
}
table tbody tr td:first-child{
	color: #f40;
}
td{
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
.desc {
    cursor: pointer;
}
</style>

<template>

    <tr>

            <td><input type="checkbox" :checked="bug.resolved" @change="$event => modifyResolved(bug.id)"></td>

            <td>{{ bug.desc }}</td>

            <td><button class="samll red button">删除</button></td>

    </tr>

</template>

<script>

export default {

    name : "BugItem",

    props : ['bug',"modifyResolvedCallBack"],

    methods : {

        modifyResolved(id){

            this.modifyResolvedCallBack(id);

        }

    }

}

</script>

<style scoped>

/* item */

table tbody tr:nth-child(odd){

    background-color: #eee;

}

table tbody tr:hover{

    background-color: #ccc;

}

table tbody tr td:first-child{

    color: #f40;

}

td{

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

.desc {

    cursor: pointer;

}

</style>