WEB前端 vue学习二 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件。
一、父组件向子组件传递数据
在 Vue 中,可以使用 props 向子组件传递数据。
子组件部分:
这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量。
如果需要从父组件获取 logo 的值,就需要使用 props: ['logo']
在 props 中添加了元素之后,就不需要在 data 中再添加变量了
父组件部分:
在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg
然后就能将App.vue中 logoMsg 的值传给 header.vue 了:
二、子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
子组件部分:
这是 login.vue 的 HTML 部分,当<input>的值发生变化的时候,将 username 传递给 App.vue
首先声明一个了方法 setUser,用 change 事件来调用 setUser
在 setUser 中,使用了 $emit 来遍历 transferUser 事件,并返回 this.username
其中 transferUser 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件
父组件部分:
在父组件 App.vue 中,声明了一个方法 getUser,用 transferUser 事件调用 getUser 方法,获取到从子组件传递过来的参数 username
getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
三、子组件向子组件传递数据
Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。
为了便于开发,Vue 推出了一个状态管理工具 Vuex,可以很方便实现组件之间的参数传递
WEB前端 vue学习二 组件之间的数据传递相关推荐
- uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时,Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- VEU中的组件之间的数据传递
组价三部曲 创建组件. 注册组件. 使用组件. 组件之间的数据传递的方式 1. 父传子 :通过props属性传递 2. 子传父 通过$emit属性,用来发布自定义事件 3. 兄弟组件之间的传递 1.父 ...
- 实现非父子之间通信,兄弟组件之间的数据传递--eventBus
vue中,组件传值的方法常见的也就那几种, 1.父组件向子组件传值,用props 属性, 2.子组件主要通过事件传递数据给父组件子向父传数据可以用$emit触发传,但是这种方法无法实现兄弟组件直接传数 ...
- react中父子组件数据传递,子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...
- WEB前端 vue学习一使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...
- Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...
- WEB前端 vue学习 vue-router讲解router.push
router.push(location) 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router ...
- vue3 语法之 父组件,子组件之间的数据传递
世事洞明皆学问,人情练达即文章.(<红楼梦>) 子组件使用v-model 父组件 // father.vue <template><div class="fat ...
最新文章
- 大战即将来临,柯洁将于5月与AlphaGo正式对决
- Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(4)...
- python笔记基础-python笔记(二)基础二
- builds error
- opencv:在二维定标中的应用
- SAP创建生产订单时要求输入销售订单
- 减少C++编译时间的方法
- [html] 如何给table中的某一列设置固定宽度
- oracle as sydba,Oracle的操作系统认证(/ as sydba 登录方式)
- php编程之如何调用支付宝支付接口的实现
- window.open的小问题
- Maybe it's time to go away
- NERO8.0刻录系统光盘
- React15中的栈调和diff算法
- 华为云ECS服务器上安装docker
- win10发送到桌面快捷方式没了
- 【转】Windows Linux MacOS操作系统的区别
- 万能密码:‘or 1=1-- 实战SQL注入,秒破后台
- pytorch动态网络以及权重共享
- input输入字符限制