组件之间传值

目录

1:组件中的关系

2:父向子传值

3:子组件向父组件共享数据

4:兄弟组件数据共享


1:组件中的关系

在项目中使用到的组件关系最常用两种是,父子关系,兄弟关系

例如A组件使用B组件或者C组件或者BC组件都使用了,那么A组件就是BC组件的父,BC组件是A组件的子,BC组件就是兄弟关系。

2:父向子传值

父子组件之间的数据共享

一个组件(父)中导入了两外一个组件(子)使用自定义属性,定义props在子组件中,共享数据

 在App.vue组件中使用Left组件,父组件向子组件传值,在父组件中定义需要传的数据,子组件中定义props接收父组件的数据

3:子组件向父组件共享数据

在子组件中通过$emit函数定义一个事件函数名称和值,在父组件中声明这个方法

 子组件示例代码:

<template><div><div class="container"><span id="app">你好</span><span>计数:{{ count }}</span><button @click="add">+1</button></div></div>
</template><script>
export default {name: 'WORKSPACE_NAMEaa',props:['init'],data() {return {message:'Hello',count:1};},mounted() {console.info('tag', document.getElementById('app').style.color='red')},methods: {add(){this.count = this.count +1this.$emit('countchange', this.count);},show(){console.info('调用了show方法')}},created(){console.info(this.show)console.info(this.message)console.info(this.init)},updated(){},beforeUpdate(){}
};
</script><style lang="less" scoped>.container{background: goldenrod;width: 300px;height: 300px;border: 1px solid black}
</style>

父组件示例代码:

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><!-- <CCC init='你好' @countchange="getNewCount"></CCC></div>
</template><script>import testMyTag from '@/views/商品案例/MyTag.vue'
import testMyTable from '@/views/商品案例/MyTable.vue'
import houbeiMyDialog from '@/views/后备插槽/MyDialog.vue'
import MyDialog from '@/views/默认插槽/MyDialog.vue'
import MyTable from '@/views/作用域插槽/MyTable.vue'
import testMyDialog from '@/views/具名插槽/MyDialog.vue'
import testnexttick from '@/views/TestnextTick.vue'
import BaseFrom from '@/views/BaseFrom.vue'
import BaseChart from '@/views/BaseChart.vue'
import AAA from '@/views/Left.vue'
import BBB from '@/views/Right.vue'
import CCC from '@/views/aa.vue'
export default {// components:{//   AAA,BBB,CCC,BaseChart,BaseFrom,testnexttick,testMyDialog,MyTable,MyDialog,houbeiMyDialog,testMyTag,testMyTable// },data(){return{countvalue:0}},methods: {getNewCount(val){this.countvalue = val}},
}
</script><style lang="less" scoped>
.footer_wrap a.router-link-exact-active{background-color: #007acc;
}
body {margin: 0px;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
</style>

4:兄弟组件数据共享

在vue2.x中,兄弟组件数据共享的方案EventBus

 

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

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

相关文章

以太坊虚拟机EVM介绍,智能合约详解

以太坊为例&#xff1a;什么是智能合约&#xff1f;智能合约怎么部署、调用、执行&#xff1f;智能合约的原理&#xff1f;智能合约存在哪儿&#xff1f;如何区分调用的是智能合约&#xff1f;世界状态数据库、EVM、智能合约它们之间的关系&#xff1f; 什么是智能合约 指的是…

【C语言程序设计】编写简单的C程序

目录 前言 一、程序设计 二、程序改错 三、程序完善 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x1f4e3;如…

ubuntu 18.04 pycharm安装

这里主要记录一下ubuntu18.04安装pycharm的过程&#xff0c;以备不时之需查阅~~ 安装并启动 1、通过Other Versions - PyCharm下载相应安装包&#xff0c;并解压。 tar -zxvf pycharm-professoinal-2020.1.3.tar.gz 2、将解压缩后的安装包移动到 /opt 目录下 sudo mv pych…

喜讯:抗HPV全新升级——佳卫苗灭杀病毒HPV正式上市

众所周知&#xff0c;HPV&#xff08;人乳头瘤病毒&#xff09;感染是周多妇科疾病的主要原因&#xff0c;而高危型HPV&#xff08;人乳头瘤病毒&#xff09;的持续感染更是导致宫颈癌的主要因素。自此以后&#xff0c;人类与HPV之间的战斗便从未停止&#xff0c;越来越多的相关…

VUE笔试题精讲1

vue专题| ProcessOn免费在线作图,在线流程图,在线思维导图 VUE面试题视频 01-Vue组件之间通信方式有哪些? 1. 组件通信常⽤⽅式有以下8种: props $emit/$on $children/$parent $attrs/$listeners ref $root eventbus vuex 注意vue3中废弃的⼏个API https://v3-mig…

【FPGA】数字电路设计基础

数字电路基础 1 什么是数字电路 在学习数字电路之前&#xff0c;我们先要了解下什么是数字电路。想要搞明白数字电路&#xff0c;就要搞明白生活中有 两种概念&#xff0c; 数字信号和模拟信号&#xff0c;模拟信号一般包括压力、气温、速度等信号&#xff0c;模拟量的值是可…

VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时&#xff0c;如何进行debug? 1.安装Chrome Debug插件。 2.在launch.json中&#xff0c;将url修改成你前端项目的路径&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…

外包干了3个月,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

六级高频词汇2

201. portion n. 一部分 202. target n. 目标&#xff0c;靶子 vt. 瞄准 203. portable a. 手提式的 204. decline v. 拒绝&#xff0c;谢绝&#xff1b;下降 205. illusion n. 错觉 206. likelihood n. 可能&#xff0c;可能性 207. stripe n. 条纹 208. emphasize vt.…

【算法】算法题-20231211

这里写目录标题 一、387. 字符串中的第一个唯一字符二、1189. “气球” 的最大数量三、1221. 分割平衡字符串 一、387. 字符串中的第一个唯一字符 简单 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回…

LANDSAT_7/02/T1/RAW的Landsat7_C2_RAW类数据集

Landsat7_C2_RAW是指Landsat 7卫星的数据集&#xff0c;采用的是Collection 2级别的数据处理方法&#xff0c;对应的是Tier 1级别的原始数据&#xff08;RAW&#xff09;。该数据集包括了Landsat 7卫星从1999年4月15日开始的所有数据&#xff0c;共涵盖了全球范围内的陆地和海洋…

基于SSM的剧本杀预约系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…