VueJsの非親コンポーネントへのデータの送信

Question

VueJsでTODO MVCを複製しようとしています。 （このcodepenをチェックアウトしてください：http://codepen.io/sankalpsingha/pen/gwymJg） 私は次のコードで「TODOリスト」と呼ばれるコンポーネントを作成しました：

Vue.component('todo-list',{ 
     template: '#todo-list', 
     props: ['todo'], 
     data: function(){ 
      return { 
       // Let us set up a isEditing Boolean so that we can know if the user 
       // will edit something and we need to change the state to reflect it. 
       isEditing: false 
      } 
     }, 
     methods: { 
      enableEditing: function(){ 

       this.isEditing = true; 
      }, 

      editTodo: function(todo){ 
       // todo.todo = todo.todo.trim(); 
       this.isEditing = false; 
      }, 

      removeTodo: function(todo){ 
      //this.todos.$remove(todo); // --> This part is not working? 
      } 
     } 
    }); 

はしかし、私はアプリのインスタンスで定義されたデータを持っている：

var app = new Vue({ 
     el: '#todo-section', 
     data: { 
      newTodo: '', 
      todos: [ 
      { 
       id: 1, 
       todo: 'Go to the grocery', 
       completed: false 
      }, 
      { 
       id: 2, 
       todo: 'See the movie', 
       completed: true 
      }, 
      { 
       id: 3, 
       todo: 'Jack Reacher : Tom Cruise', 
       completed: false 
      } 
      ] 
     }, 

     methods: { 
      addTodo: function(){ 
       // This will not allow any empty items to be added. 
       if(this.newTodo.trim() == ''){ 
        return; 
       } 
       this.todos.push({ 
        todo: this.newTodo.trim(), 
        completed: false 
       }); 
       this.newTodo = '' 
      } 
     } 
    }); 

リストから1つのTodoを削除できません。私の推測では、私はアプリのインスタンスに送信メッセージを送信し、それからデータを削除するリスナーを置く必要があるということですか？データを削除するにはどうすればよいですか？

Answer 1

codePenの例でxボタンをクリックして削除しようとすると、エラーが表示されます。this.$parent.todos.$removeは機能ではありません。

私はあなたのコードを深く見ていません。しかし、this.$parentを使って親コンポーネントメソッドにアクセスしようとするのは良い考えではありません。理由：コンポーネントはどこでも使用でき、特定のプロパティまたはメソッドを持つ$親を持つと仮定すると危険です。

質問にお答えしましたとおり、子コンポーネントの$emitを使用してデータを削除する必要があります。これは、親コンポーネントにイベントを送出し

<button @click="$emit('delete-row')">Delete</button> 

：https://jsfiddle.net/mani04/4kyzkgLu/

子コンポーネントのようないくつかのコードを持っています

私はjsFiddleを作成した数日前にここで別の同様の質問がありました。親コンポーネントは、そのjsFiddleの例に示すように、 v-onを使用してそのイベントにサブスクライブすることができます。 Delete a Vue child component

Answer 2

それはあなたの親にあなたの方法（DeleteTodo、EditTodoを...）を使用するのが好ましいです：ここでは

は、参考のために、他の問題があることです。

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    newTodo: '', 
 
    todos: [{ 
 
     id: 1, 
 
     title: 'Go to the grocery', 
 
     completed: false 
 
    }, { 
 
     id: 2, 
 
     title: 'See the movie', 
 
     completed: true 
 
    }, { 
 
     id: 3, 
 
     title: 'Jack Reacher : Tom Cruise', 
 
     completed: false 
 
    }] 
 
    }, 
 

 
    methods: { 
 
    addTodo: function() { 
 
     this.todos.push({ 
 
     todo: this.newTodo.trim(), 
 
     completed: false 
 
     }); 
 
     this.newTodo = '' 
 
    }, 
 

 
    deleteTodo: function(todo) { 
 
     this.todos = this.todos.filter(function(i) { 
 
     return i !== todo 
 
     }) 
 
    } 
 
    } 
 
});

<div id="app"> 
 
    <ul> 
 
    <li v-for="todo in todos">{{ todo.title }} 
 
     <button @click.prevent="deleteTodo(todo)"> 
 
     Delete 
 
     </button> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>