组件间数据交互——父组件向子组件传值（ props属性值类型） 子组件向父组件传值-携带参数 || 非父子组件间传值
2024-05-09 00:33:45
父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{{pmsg}}</div><menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*父组件向子组件传值-props属性值类型*/Vue.component('menu-item', {props: ['pstr','pnum','pboo','parr','pobj'],template: `<div><div>{{pstr}}</div><div>{{12 + pnum}}</div><div>{{typeof pboo}}</div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><span>{{pobj.name}}</span><span>{{pobj.age}}</span></div></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父组件中内容',pstr: 'hello',parr: ['apple','orange','banana'],pobj: {name: 'lisi',age: 12}}});</script>
</body>
</html>
子组件向父组件传值-基本用法
props传递数据原则：单向数据流
1. 子组件通过自定义事件向父组件传递信息
2. 父组件监听子组件的事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div><menu-item :parr='parr' @enlarge-text='handle'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父组件中内容',parr: ['apple','orange','banana'],fontSize: 10},methods: {handle: function(){// 扩大字体大小this.fontSize += 5;}}});</script>
</body>
</html>
子组件向父组件传值-携带参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div><menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小5px</button><button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小10px</button></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父组件中内容',parr: ['apple','orange','banana'],fontSize: 10},methods: {handle: function(val){// 扩大字体大小this.fontSize += val;}}});</script>
</body>
</html>
非父子组件间传值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>父组件</div><div><button @click='handle'>销毁事件</button></div><test-tom></test-tom><test-jerry></test-jerry></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*兄弟组件之间数据传递*/// 提供事件中心var hub = new Vue();Vue.component('test-tom', {data: function(){return {num: 0}},template: `<div><div>TOM:{{num}}</div><div><button @click='handle'>点击</button></div></div>`,methods: {handle: function(){hub.$emit('jerry-event', 2);}},mounted: function() {// 监听事件hub.$on('tom-event', (val) => {this.num += val;});}});Vue.component('test-jerry', {data: function(){return {num: 0}},template: `<div><div>JERRY:{{num}}</div><div><button @click='handle'>点击</button></div></div>`,methods: {handle: function(){// 触发兄弟组件的事件hub.$emit('tom-event', 1);}},mounted: function() {// 监听事件hub.$on('jerry-event', (val) => {this.num += val;});}});var vm = new Vue({el: '#app',data: {},methods: {handle: function(){hub.$off('tom-event');hub.$off('jerry-event');}}});</script>
</body>
</html>
组件间数据交互——父组件向子组件传值（ props属性值类型） 子组件向父组件传值-携带参数 || 非父子组件间传值相关推荐
- Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现 组件化即是对某些可以进行复用的功能进行封装的标准化工作 标准:要想组件能够成功组合在一起,每个组件必须要有标准 分治:将不同的功能封装到不同的组件 ...
- Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述 以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
- Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
- Vue之非父子组件通信
Vue之非父子组件通信 非父子组件传值方法: 1:在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
- 组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互 父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件 父组件向子组件传值-基本使用 <!DOCTYPE html> < ...
- vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
- 020_Vue非父子组件之间数据交互
1. 非父子组件之间数据交互 1.1. 单独的事件中心管理组件间的通信 var eventHub = new Vue(); 1.2. 监听事件 eventHub.$on('event-name', f ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值 子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
最新文章
- Java的知识点21——String类、StringBuffer和StringBuilder、不可变和可变字符序列使用陷阱
- Android开发过程中的部分经验总结
- shields 徽标_我的徽标素描过程
- 中国计算机学会第七届全国Web信息系统及其应用学术会议(WISA2010)征文通知
- cmd查看某个服务器端口状态,cmd中检测端口是否处于监听状态 | IT博客
- python 开闭原则_Python 装饰器@，对函数进行功能扩展操作示例【开闭原则】
- WordPress 图片防盗链的方法
- 隐马尔可夫模型HMM与维特比Veterbi算法（一）
- MyEclipse项目中的包按层次显示
- 把矩阵变为0，1矩阵
- VMwear安装Centos7超详细过程
- linux实现快捷键,Linux Bash下如何实现快捷键效果
- Scikit-Learn 与 TensorFlow 机器学习实用指南学习笔记 3 —— 数据获取与清洗
- FFmpeg转码B帧
- UCDOS作者---鲍岳桥
- 大海捞针 - Everthing的实现思路
- 各类邮箱谷歌邮箱、Outlook邮箱、雅虎邮箱的购买养号策略
- 顺利通过2021年上工信部的网络工程师考试，在此感悟一下
- Java每周一记（2）
- 知道两点经纬度，计算双方距离与方向的原理