console
Vue.component('parent-component',{
template: `
<div>
{{ title }}
<br/>
<child-component @updateParent="update" :updateCallback="updateCallback">
</child-component>
</div>
`,
data(){
return {
title: "父组件"
}
},
methods: {
update(){
this.title = "父组件更新了($emit)";
},
updateCallback(){
this.title = "父组件更新了(prop callback)";
},
}
});
Vue.component('child-component',{
template: `
<div>
<button @click="updateByEmit">
通过 $emit 更新父组件
</button>
<br/>
<button @click="updateByCallback">
通过 prop callback 更新父组件
</button>
</div>
`,
props: {
updateCallback: Function,
},
methods: {
updateByEmit(){
this.$emit("updateParent");
},
updateByCallback(){
this.updateCallback();
},
}
});
new Vue({
el: '#root',
})
<script src="https://unpkg.com/vue"></script>
<div id="root">
<parent-component>
</parent-component>
</div>