to-do-list-蒲公英云

to-do-list

叁歲伎倆 2022-05-31 23:42 331阅读 0赞

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="example">
        <to-do-box></to-do-box>
    </div>
    <script type="text/javascript">
        //按组件树的方式code  组件：代码复用
        var bus=new Vue({});
        Vue.component('to-do-item',{
            props:['sendMsg','myIndex'],
            methods:{
                deleteItem(){
                    this.$emit('deleteEvent',this.myIndex);
                    //this.parents.msgList.splice(this.myIndex,1); 另一种方法
                }
            },
            template:`
                <li>
                    <button @click="deleteItem">delete</button>
                    <span>{
   {sendMsg}}</span>
                </li>
            `
        });
        Vue.component('to-do-list',{
            data:function(){
                return {
                    msgList:[]
                }
            },
            created:function(){
                //var that=this;
                bus.$on('addEvent',(msg)=>{
                    console.log("接收到数据为："+msg);
                    this.msgList.push(msg);
                })
            },
            methods:{
                rcvDeleteMsg(index){
                    this.msgList.splice(index,1);
                }
            },
            template:`
                <ul>
                    <to-do-item v-for="(tmp,index) in msgList" :sendMsg="tmp" :myIndex="index" :key="index" @deleteEvent="rcvDeleteMsg"></to-do-item>
                </ul>
            `
        });
        Vue.component('to-do-input',{
            data:function(){
                return {
                    userInput:''
                }
            },
            methods:{
                handleClick(){
                    bus.$emit('addEvent',this.userInput);
                }
            },
            template:`
                <div>
                    <h2>待做事项列表</h2>
                    <input type="text" placeholder="请输入" v-model='userInput'/>
                    <button @click="handleClick">add</button>
                </div>
            `
        });
        Vue.component('to-do-box',{
            template:`
                <div>
                    <to-do-input></to-do-input>
                    <to-do-list></to-do-list>
                </div>
            `
        })
        new Vue({
            el:'#example',
            data:{
                msg:'VueJS is Awesome'
            }
        });
    </script>
</body>
</html>