console 命令行工具 X clear

console

let planItem= {
    template: '#plan-template',
    props: {
        name: String,
        selected: String,
    },
    data () {
        return {
            event: 'event',
        }
    },
    methods: {
        select () {
            this.$emit('select',this.name)
        }
    },
    computed: {
        isSelected ()  {
            return this.name === this.selected;
        }
    }

}

let planPicker= {
    template: '#plan-picker',
    data () {
        return {
            names: ['Washing',  'Sleeping', 'Eating'],
            selected: null
        }
    },
    components: {
        'plan-item': planItem,
    },
    methods: {
        select (name) {
            this.selected = name;
        },
        cancelAll3 () {
        console.log('a');
            this.selected = null;
        }
    },
    
}

let planCancel = {
    template: '#plan-cancel',
    
    methods: {
        cancelAll () {
             console.log('ab');
            this.$emit('select2');
        }
    }
}

      

new Vue({
    el: '#container',
    components: {
        'planPicker': planPicker,
        'planCancel': planCancel,
    },
    
    methods: {
        cancelall2 () {
             console.log('a');
            this.$refs.child.$emit('cancelAll3');
        }
    }
}
);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title></title>
</head>
<body>
	<div id='container'>
        <div @select2='cancelall2'>
        <plan-picker ref='picker'></plan-picker>
        <plan-cancel></plan-cancel>
        </div>
    </div>

    <script type='text/x-template' id='plan-template'>
        <div class='event' :class="{'active-plan':isSelected}"  @click='select' >
            {{name}}
        </div>
    </script>

    <script type='text/x-template' id='plan-picker'>
    <div>
    <plan-item v-for='name in names' :name='name' :selected='selected' @select='select(name)'></plan-item>
    </div>
    </script>

    <script type='text/x-template' id='plan-cancel'>
    <div>
    <button @click='cancelAll'>cancel</button>
    </div>
    </script>
</body>
</html>

.event{
    padding:0.5em;
    text-align:center;
    background-color: gray;
    border: 2px solid;
    border-color: green;
}

.event:hover{
    cursor: pointer
}

#container{
    position:absolute;
    translate: (-50%,-50%);
    width: 5em;
    height:3.8em;
    left:50%;
    top:50%;
}
.active-plan{
    border:5px solid;
}

本项目引用的自定义外部资源

vue.js