Vue2.0 组件传值方式:父传子、子传父、非父子组件传值

文章目录

      • 1. 父组件向子组件进行传值
        • 父组件:
        • 子组件:
      • 2. 子组件向父组件传值
        • 子组件:
        • 父组件:
      • 3. 非父子组件进行传值
        • 公共bus.js
        • 组件A:
        • 组件B:

每次总结都是在加强一遍记忆

1. 父组件向子组件进行传值

父组件:
<template><div>父组件:<input type="text" v-model="name"><br><br><!-- 引入子组件 --><child :inputName="name"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}}}
</script>
子组件:
<template><div>子组件:<span>{{inputName}}</span></div>
</template>
<script>export default {// 接受父组件的值props: {inputName: String,required: true}}
</script>

2. 子组件向父组件传值

子组件:
<template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type="button" value="点击触发" @click="childClick"></div>
</template>
<script>export default {data () {return {childValue: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit('childByValue', this.childValue)}}}
</script>
父组件:
<template><div>父组件:<span>{{name}}</span><br><br><!-- 引入子组件 定义一个on的方法监听子组件的状态--><child v-on:childByValue="childByValue"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}},methods: {childByValue: function (childValue) {// childValue就是子组件传过来的值this.name = childValue}}}
</script>

3. 非父子组件进行传值

非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。

公共bus.js
//bus.js
import Vue from 'vue'
export default new Vue()
组件A:
<template><div>A组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue"></div>
</template>
<script>// 引入公共的bug,来做为中间传达的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}},methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)}}}
</script>
组件B:
<template><div>B组件:<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div>
</template>
<script>import Bus from './bus.js'export default {data () {return {name: 0}},mounted: function () {var vm = this// 用$on事件来接收参数Bus.$on('val', (data) => {console.log(data)vm.name = data})},methods: {getData: function () {this.name++}}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/667105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析:当当网书籍数据可视化分析

当当网书籍数据可视化分析 作者&#xff1a;i阿极 作者简介&#xff1a;Python领域新星作者、多项比赛获奖者&#xff1a;博主个人首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可以点赞&#x1f44d;收藏&#x1f4c1;评论&…

GA/T 1707-2019 防爆安全门检测

防爆安全门是指能抵抗爆炸冲击波作用的特种防护门&#xff0c;根据防爆门的防爆性能的不同&#xff0c;分为非接触爆炸防爆门和防接触爆炸防爆门&#xff0c;根据防爆能力的不同&#xff0c;分为不同等级。 GA/T 1707-2019 防爆安全门检测项目 测试项目 测试标准 外观质量 …

基于场景文字知识挖掘的细粒度图像识别算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;基于场景文字知识挖掘的细粒度图像识别算法1、研究背景2、方法提出方法模块 3、试验4、文章贡献 二、RNN代码学习2.1、什么是RNN2…

Day43 377组合总和IV 70爬楼梯 322零钱兑换 279完全平方数 139单词拆分

377 组合总和IV 给定一个由正整数组成且不存在重复数字的数组&#xff0c;找出和为给定目标正整数的组合的个数。 示例: nums [1, 2, 3]target 4 所有可能的组合为&#xff1a; (1, 1, 1, 1) (1, 1, 2) (1, 2, 1) (1, 3) (2, 1, 1) (2, 2) (3, 1) 请注意&#xff0c;顺序…

快速上手Vue开发:npm命令大全

文章目录 一、简介二、基础命令1、设置镜像2、安装包3、卸载包4、更新包5、查看已安装包6、检查过时的包7、查看帮助8、显示 npm 根目录9、创建 package.json 文件10、清除缓存 一、简介 npm是JavaScript运行时环境Node.js的默认包管理器&#xff0c;全称是Node Package Manage…

Mysql学习记录补充

索引 在无索引情况下&#xff0c;就需要从第一行开始扫描&#xff0c;一直扫描到最后一行&#xff0c;我们称之为 全表扫描&#xff0c;性能很低。 如果我们针对于这张表建立了索引&#xff0c;假设索引结构就是二叉树&#xff0c;那么也就意味着&#xff0c;会对age这个字段…

关于python中的import

导入指定路径下的模块 sys模块中的sys.path中保存在代码运行时依次寻找模块的路径&#xff0c;sys.path的返回值是一个列表&#xff0c;可以通过向列表中插入或追加路径&#xff0c;来实现调用指定路径下模块的查找。 除了在运行时添加环境变量还可在修改配置文件来添加环境变…

Linux|Grep 命令的 12 个实用示例

您是否曾经遇到过在文件中查找特定字符串或模式的任务&#xff0c;但不知道从哪里开始查找&#xff1f;那么&#xff0c;grep 命令可以拯救你&#xff01; grep 是一个功能强大的文件模式搜索器&#xff0c;每个 Linux 发行版都配备了它。如果出于某种原因&#xff0c;它没有安…

【C++入门学习指南】:函数重载提升代码清晰度与灵活性

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; C入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、函数重载1.1 函数重载的概念1.2 函数重载的作用1.3 C支持函数重载的原理1.4 扩展 &…

C++ STL库详解:容器适配器stack和queue的结构及功能

一、stack 1.1stack的介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&#xf…

图数据库(neo4j)在工业控制中的应用

图模型 事物的模型中&#xff0c;除了它自身的某些特征之外&#xff0c;还包括它与其它事物的关系特征&#xff0c;例如一个学生的属性包括姓名&#xff0c;性别&#xff0c;年龄等属性&#xff0c;同时&#xff0c;他还有许多关系属性&#xff0c;比如他属于哪一个院系&#x…

背篼酥电子编程内部集中培训寒假营

寒假营专栏 7节理论加3节比赛 第一课 背篼酥电子编程内部集中培训第一课-基础知识 第二课 背篼酥电子编程内部集中培训第二课–软件环境 第三课 背篼酥电子编程内部集中培训第三课–蜂鸣器 第四课 背篼酥电子编程内部集中培训第四课–红外避障 第五课 背篼酥电子编程…

修改照片尺寸好用的工具,分享4款!

在数字时代&#xff0c;照片已成为我们生活的一部分&#xff0c;而如何调整照片尺寸以满足不同的需求&#xff0c;则显得至关重要。今天&#xff0c;我们就来探讨那些可以修改照片尺寸的工具&#xff0c;让你轻松应对各种尺寸需求。 茄子水印相机 这是一款功能强大、操作简单的…

MacBook有必要装清理软件吗?CleanMyMac X v4.14.6 直装特别版 附安装教程

MacBook是苹果公司的一款高端笔记本电脑&#xff0c;但是&#xff0c;随着使用时间的增长&#xff0c;MacBook也会出现一些问题&#xff0c;比如运行缓慢、卡顿、垃圾文件堆积、磁盘空间不足等。这些问题不仅影响了用户的使用体验&#xff0c;也可能对MacBook的寿命和安全性造成…

已经购买了阿里云服务器ECS,如何在上面部署幻兽帕鲁服务器?(一键安装非常简单)

很多人都知道阿里云可以支持一键购买并部署幻兽帕鲁服务器&#xff0c;不需要你进行任何配置&#xff0c;也不用你登录服务器&#xff0c;通过查看和管理计算巢面板就可以了&#xff0c;直接就可以开玩了。但是如果你已经有了一台阿里云服务器ECS那么该怎么去搭建幻兽帕鲁服务器…

Centos 内存和硬盘占用情况以及top作用

目录 只查看内存使用情况&#xff1a; 内存使用排序取前5个&#xff1a; 硬盘占用情况 定位占用空间最大目录 top查看cpu及内存使用信息 前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&…

c++类继承

一、继承的规则 &#xff08;1&#xff09;基类成员在派生类中的访问权限不得高于继承方式中指定的权限。例如&#xff0c;当继承方式为protected时&#xff0c;那么基类成员在派生类中的访问权限最高也为protected&#xff0c;高于protected会降级为protected&#xff0c;但低…

通讯基本概念

通信的方式有多种&#xff0c;按数据传输方式可分为串行通讯和并行通信&#xff1b;按通信数据同步方式可分为同步通信和异步通信&#xff1b;按数据通信的方向可分为 一、串行通信和并行通信 串行通信&#xff1a;设备之间通过少量的数据信号线&#xff08;一般是8根以下&am…

JAVASE进阶:Collection高级(3)——HashSet、LinkedHashSet底层原理

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;JAVASE进阶&#xff1a;Collection高级&#xff08;2&#xff09;——源码剖析ArrayList、LinkedList、迭代器 &#x1f4da;订阅…

STM32 自学笔记 学习笔记 一

起源&#xff0c;A7,A9,M3&#xff0c;原来弄了A9的TQ2440&#xff0c;结果还得来重新熟悉下32函数JLINK使用SW方式&#xff0c;本来可以下载&#xff0c;但是一根线掉了重新上去&#xff0c;就出各种跟线无关问题&#xff0c;干脆把32断了重新接&#xff0c;结果就成功了&…