Skip to content

Instantly share code, notes, and snippets.

Created Mar 30, 2017
What would you like to do?
vue - emit - on
<!doctype html>
<html class="no-js" lang="">
<meta charset="utf-8">
<script src="js/vendor/vue.js"></script>
<div id="app">
<script type="text/x-template" id="parent-template">
<h3>foo in parent</h3>
<child-component v-bind:my-prop="foo" v-on:fooChanged="fooChangedParent"></child-component>
<button v-on:click="setFoo()">set foo</button>
<script type="text/x-template" id="child-template">
<h3>foo in child</h3>
<button v-on:click="setFooChild()">set foo in child component</button>
Vue.component('parent-component', {
template: '#parent-template',
data: function() {
return {
foo: 'Humpty Dumpty'
methods: {
setFoo: function() { = 'Tweedledee';
fooChangedParent: function() { = 'set in parent';
Vue.component('child-component', {
props: ['myProp'],
template: '#child-template',
methods: {
setFooChild: function() {
var myApp = new Vue({
el: '#app'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment