tabs中的篩選狀態取決于todo里面傳過來的filter.你要通過事件總線($emit)將當前的點擊的狀態發送給父組件todo.vue,再在todo里面通過實踐監聽來將傳過來的state定義為傳過去的filter,以改變篩選標簽.

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);

????}

}