注釋很詳細，直接上代碼
上一篇
新增內(nèi)容
- 子傳父之子組件傳遞方法與值
- 子傳父之父組件接收方法與值
源碼
App.vue
<template>
<div id="app">
<!-- @事件名="方法" 接收子組件傳遞過來的方法，
可在方法中使用子組件傳遞的值 -->
<MyTest :counts="counts" @addCount="addCount"/>
</div>
</template>
<script>
// 導入局部注冊組件
import MyTest from "./components/MyTest.vue";
export default {
name: "App",
components: {
//注冊局部注冊組件
MyTest,
},
data() {
return {
//定義data值
counts:1000
};
},
methods: {
addCount(num){//使用子組件傳遞過來的值進行操作
this.counts+=num;
}
},
};
</script>
<style>
#app {
display: flex;
flex-direction: row;
}
</style>
MyTest.vue
<template>
<div id="MyTest">
<h1>當前功德數(shù)：{{ counts }}</h1>
<div>
<!-- @click="$emit（事件名'，傳的數(shù)據(jù)） ,向父組件發(fā)送事件并傳值" -->
<button v-for="(item) in num" @click="$emit('addCount',item)" :key="item">敲木魚{{ item }}次</button>
</div>
</div>
</template>
<script>
export default {
// 因為組件每次使用都需要是一個新的對象，
// 所以data數(shù)據(jù)都需要是函數(shù)返回
data() {
return {
num:[1,10,100]
}
},
// 接收父組件傳過來的數(shù)據(jù)
props:['counts']
}
</script>
<style lang="less" scoped>
#MyTest button{
margin: 0 10px;
}
</style>
效果演示文章來源：http://www.zghlxwxcb.cn/news/detail-857541.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-857541.html
到了這里，關(guān)于vue快速入門（三十六）組件通信-子傳父的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
