html
|
1 2 3 |
<div id="demo"> <comp-child v-bind:msg="message" v-on:childs-event="parentsMethod"></comp-child> </div> |
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import Vue from 'vue'; Vue.component('comp-child', { template: ` <div> <button v-on:click="handleClick">親のイベント発火</button> </div>`, props: ['message'], data: function() { return { child_message: 'child' } }, methods: { handleClick: function(){ this.$emit('childs-event', this.child_message) } }, }) const demo = new Vue({ el: '#demo', data: { msg: '' }, methods: { parentsMethod: function(value){ alert(value) } } }); |
実行結果
Vue.js サンプルプログラム集:
Dev
ex.prettytabby.com
