tabs中的篩選狀態(tài)取決于todo里面?zhèn)鬟^來(lái)的filter.你要通過事件總線($emit)將當(dāng)前的點(diǎn)擊的狀態(tài)發(fā)送給父組件todo.vue,再在todo里面通過實(shí)踐監(jiān)聽來(lái)將傳過來(lái)的state定義為傳過去的filter,以改變篩選標(biāo)簽.

tabs.vue:

methods: {

????clearAllCompleted() {

????????this.$emit('clearAll');

????},

????toggleFilter(state) {

????????this.$emit('toggle', state);

????}

}

todo.vue:

HTML部分:

<Tabs

? ? ?:filter="filter"

? ? ?:todos="todos"

? ? ?@toggle="toggleFilter"

? ? ?@clearAll="clearAllCompletedTodo"

? ?/>

script部分:

methods: {

????addTodo(e) {

????????this.todos.unshift({

????????????id: id++,

????????????content: e.target.value.trim(),

????????????completed: false

?????????});

????????e.target.value = '';

?????},

????deleteTodo(id) {

????????this.todos.splice(this.todos.findIndex(todo => id === todo.id), 1);

????},

????toggleFilter(state) {

????????this.filter = state;

????},

????clearAllCompletedTodo() {

????????this.todos = this.todos.filter(todo=> todo.completed===false);

????}

}