子コンポーネントから親コンポーネントで実行するメソッドを取得できません

Question

子コンポーネントの1つのボタンがクリックされたときに親コンポーネントで実行するメソッドを取得しようとしています。私はWebpackで単一ファイルコンポーネントを使用しています。ここでは、子コンポーネントのコードだ：

<template> 
    <button v-on:click="add">Click</button> 
</template> 

<script> 
export default { 
    methods: { 
    add:() => { 
     console.log('foo') 
     this.$dispatch('addClick') 
    } 
    } 
} 
</script> 

と親のためのコード：

<template> 
    <div id="app"> 
    <count :total="total"></count> 
    <click></click> 
    </div> 
</template> 

<script> 
import count from './components/count.vue' 
import click from './components/click.vue' 

export default { 
    components: { 
    count, 
    click 
    }, 
    data:() => { 
    return { 
     total: 0 
    } 
    }, 
    methods: { 
    addToTotal:() => { 
     console.log('bar') 
     this.total += 1 
    } 
    }, 
    events: { 
    addClick: 'addToTotal' 
    } 
} 
</script> 

countコンポーネントがtotal変数を表示するだけで、H1要素です。私がボタンをクリックすると、 "foo"はコンソールにログを記録しますが、 "bar"は表示されず、合計は変化しません。私が間違っていることに関するアイデアは？前もって感謝します！

Answer 1

あなたは彼らに間違ったthisを与えているあなたの方法、のためのラムダ表記を使用しています。代わりにfunctionを使用すると、動作します。

Vue.component('click', { 
 
    template: '#clicker', 
 
    methods: { 
 
    add: function() { 
 
     console.log('foo') 
 
     this.$dispatch('addClick') 
 
    } 
 
    } 
 

 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data:() => { 
 
    return { 
 
     total: 0 
 
    } 
 
    }, 
 
    methods: { 
 
    addToTotal: function() { 
 
     console.log('bar') 
 
     this.total += 1 
 
    } 
 
    }, 
 
    events: { 
 
    addClick: 'addToTotal' 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<template id="clicker"> 
 
    <button v-on:click="add">Click</button> 
 
</template> 
 

 
<div id="app"> 
 
    <count :total="total"></count> 
 
    <click></click> 
 
    {{total}} 
 
</div>

Answer 2

利用count部品のtotal財産上の双方向.sync結合型修飾子の親total値が変更されたときに値が更新されますように。次に例を示します。

Vue.component('click', { 
 
    template: '<button v-on:click="add">Click</button>', 
 
    methods: { 
 
     add: function() { 
 
      this.$dispatch('addClick'); 
 
     } 
 
    } 
 
}); 
 

 
Vue.component('count', { 
 
    template: '<h1 v-text="total"></h1>', 
 
    props: { 
 
     total: { 
 
      type: Number, 
 
      twoWay: true 
 
     } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     total: 1 
 
    }, 
 
    methods: { 
 
     addTotal: function() { 
 
      this.total++; 
 
     } 
 
    }, 
 
    events: { 
 
     addClick: 'addTotal' 
 
    } 
 
});

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

 
<div id="app"> 
 
    <count :total.sync="total"></count> 
 
    <click></click> 
 
</div>