在父組件 App.vue 中引用子組件 A.vue，把 A中的數(shù)據(jù)傳給App.
ps:沒看父組件傳給子組件的先看看去成榜。
1框舔、代碼
子組件 A.vue
<template>
<div>
<h3>這里是子組件的內(nèi)容</h3>
<button v-on:click="spot">點一下就傳</button>
</div>
</template>
<script>
export default {
methods: {
spot: function() {
// 與父組件通信一定要加上這句話
this.$emit("spot", '我是子組件傳給父組件的內(nèi)容就我。赎婚。')
}
}
}
</script>
父組件 App.vue
<template>
<div id="app">
<!-- 父組件直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件刘绣。 -->
<!-- 需跟子組件中的$emit組合使用 -->
<A v-on:spot="spot"/>
</div>
</template>
<script>
import A from './components/A'
export default {
name: 'App',
components: {
A
},
methods:{
spot:function(data){
console.log(data)
}
}
}
</script>
2、總結(jié)
1挣输、$emit很重要纬凤，使用 $emit(事件名，參數(shù)) 觸發(fā)事件
2撩嚼、子組件需要某種方式來觸發(fā)自定義事件
3停士、父組件直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件，需跟子組件中的$emit組合使用完丽。
3恋技、效果
子傳父效果.gif
