Skip to content

Instantly share code, notes, and snippets.

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