子組件向父組件傳值
component-->A.vue
<template>
<div class="a">
<h2>A.vue</h2>
<button @click="changeTitle">change App.vue's title</button>
</div>
</template>
<script>
export default {
methods: {
changeTitle() {
//第一個參數(shù)就是注冊是事件名稱决左，名字隨便起诉植，第二參數(shù)是要傳的值
this.$emit("changeAppTitle", "Goodbye Vue");
}
}
};
</script>
App.vue
<template>
<div id="app">
<h1>{{title}}</h1>
<!-- 事件要寫在嵌套的組件中 -->
<A @changeAppTitle="changeTitle" />
</div>
</template>
<script>
import A from "./components/A";
export default {
name: "app",
components: {
A
},
data() {
return {
title: "Hello Vue"
};
},
methods: {
changeTitle(name) {
this.title = name;
}
}
};
</script>
效果:
事件注冊.gif
