当前位置: 首页 > article >正文

第二十章 Vue组件通信之父子通信

目录

一、引言

二、组件关系分类

三、组件通信的解决方案

3.1. 父子通信流程图

3.2. 父组件通过 props 将数据传递给子组件

 3.2.1. 代码App.vue 

3.2.2. 代码MySon.vue 

3.3. 子组件利用 $emit 通知父组件修改更新 

​编辑3.3.1. 代码App.vue

3.3.2. 代码MySon.vue 

3.3.3. 运行效果 

四、总结


一、引言

在使用Vue框架的日常开发中,我们会遇到各种场景需求涉及到到组件通信, 也就是指组件与组件之间的数据传递。

在Vue中组件之间会存在多种不同的组件关系,因此组件通信的方案也有所不同。

二、组件关系分类

1. 父子关系

2. 非父子关系

三、组件通信的解决方案

3.1. 父子通信流程图

3.2. 父组件通过 props 将数据传递给子组件

 3.2.1. 代码App.vue 

<template>
  <div class="App" style="border:3px solid #000;margin:10px">
    我是App组件
    <!-- 给组件标签以添加属性的方式去传值 -->
    <MySon :target="myTarget"></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
    data () {
        return {
            myTarget: '不畏将来,不念过往,把握当下。人生是一场漫长的修行,持续拼搏努力,未来一定会好的!'
        }
    },
    components: {
        MySon: MySon
    }
}
</script>

<style>

</style>

3.2.2. 代码MySon.vue 

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是MySon组件
    {{ target }}
  </div>
</template>

<script>
export default {
    // 通过props进行接收
    props: ['target']
}
</script>

<style>

</style>

3.3. 子组件利用 $emit 通知父组件修改更新 


3.3.1. 代码App.vue

<template>
  <div class="App" style="border:3px solid #000;margin:10px">
    我是App组件
    <!-- :target="myTarget" 给组件标签以添加属性的方式去传值 -->
    <!-- 父组件对消息进行监听 -->
    <MySon :target="myTarget" @changeTarget="handleChange"></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
    data () {
        return {
            myTarget: '不畏将来,不念过往,把握当下。人生是一场漫长的修行,持续拼搏努力,未来一定会好的!'
        }
    },
    methods: {
        // 提供处理函数和逻辑
        handleChange (newTarget) {
            console.log(newTarget)
            this.myTarget = newTarget
        }
    },
    components: {
        MySon: MySon
    }
}
</script>

<style>

</style>

3.3.2. 代码MySon.vue 

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是MySon组件
    {{ target }}
    <button @click="changeFn">修改我的目标</button>
  </div>
</template>

<script>
export default {
    // 通过props进行接收
    props: ['target'],
    methods: {
        changeFn () {
            // 1. 通过$emit,向父组件发送消息通知
            this.$emit('changeTarget', '学海无涯,把握每分每秒')
        }
    }
}
</script>

<style>

</style>

3.3.3. 运行效果 

四、总结

1. 两种组件关系分类和对应的组件通信方案

父子关系 → props & $emit

非父子关系 → provide & inject 或 eventbus

通用方案 → vuex

2. 父子通信方案的核心流程

2.1 父传子props:

① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用

2.2 子传父$emit:

① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数


http://www.kler.cn/a/373263.html

相关文章:

  • 若依框架部署到服务器后头像资源访问404
  • nmcli、ip、ifcfg配置网络区分方法
  • 项目里MongodbTemplate用法
  • 【OpenSearch】机器学习(Machine Learning)神经搜索教程
  • QT项目-仿QQ聊天(带宠物系统)
  • 基于SpringBoot+Vue+MySQL的房屋租赁系统
  • Flutter Color 大调整,需适配迁移,颜色不再是 0-255,而是 0-1.0,支持更大色域
  • Spring5学习记录(一)之IOC容器管理(基于XML方式)
  • vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页,同时解决预览pdf显示模糊的问题
  • 【算法与数据结构】二分查找思想
  • 海外媒体发稿:如何打造媒体发稿策略
  • 【SSM详细教程】-13-SpringMVC详解
  • Convolution 卷积
  • QT 实现自定义动态选择指示器
  • git的学习之远程进行操作
  • AIGC与教育行业的邂逅--其在数学领域的应用与实现
  • 【代码随想录Day55】图论Part07
  • 后台管理系统的通用权限解决方案(二)SpringBoot整合Swagger Springfox实现接口日志文档
  • Android系统架构
  • 新品上市|RNA提取系列上市了!
  • 和鲸科技 CEO 范向伟受邀揭牌启动南京大学 2024 级大学生人工智能素养大赛
  • 数据库真的是能够决定架构的
  • 论文提交步骤 | 2024年第五届MathorCup大数据竞赛
  • 阿里云物联网的通信方式
  • C++第九讲:模板进阶
  • 第三方软件检测公司分享:软件性能测试有哪些好用的测试工具?