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

注释很详细,直接上代码

上一篇

新增内容

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

App.vue

html 复制代码
<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

html 复制代码
<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>

效果演示

相关推荐
今天不要写bug11 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优14 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
一只小阿乐15 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
小圣贤君15 分钟前
小说写作中的时间轴管理:基于 Vue 3 的事序图技术实现
vue.js·electron·写作·甘特图·时间轴·事序图
Zz_waiting.16 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone16 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~19 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go9 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript