vue快速入门（三十六）组件通信-子传父

本文主要是介绍vue快速入门（三十六）组件通信-子传父，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注释很详细，直接上代码

上一篇

新增内容

1. 子传父之子组件传递方法与值
2. 子传父之父组件接收方法与值

源码

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>当前功德数：{{ counts }}</h1><div><!-- @click="$emit（事件名'，传的数据） ,向父组件发送事件并传值" --><button v-for="(item) in num" @click="$emit('addCount',item)" :key="item">敲木鱼{{ item }}次</button></div></div>
</template><script>export default {// 因为组件每次使用都需要是一个新的对象，// 所以data数据都需要是函数返回data() {return {num:[1,10,100]}},// 接收父组件传过来的数据props:['counts']}
</script><style lang="less" scoped>
#MyTest button{margin: 0 10px;
}</style>

效果演示

这篇关于vue快速入门（三十六）组件通信-子传父的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---