vue变量传值_vue组件与组件之间传值
目录
一、父组件向子组件传值
二、子组件向父组件传值
三、兄弟组件之间的传值
如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件
一、父组件向子组件传值:
html代码:
<div id="app"><v-app><!-- 用:xxxx="xxxx"绑定父组件的数据 --><list-group :listgroup="listgroup"></list-group></v-app>
</div>
子组件注册代码:
Vue.component('list-group', {// 接收父组件的数据props:['listgroup'],template:`<v-cardmax-width="300"tile><v-list rounded><v-list-item-group v-model="listgroup.item" color="primary"><v-list-itemv-for="(item, index) in listgroup.items":key="index" v-text="item.text""></v-list-item></v-list-item-group></v-list></v-card>`})
父组件代码:
new Vue({el: '#app',vuetify: new Vuetify(),data: {// 父组件中的数据listgroup:{item: 1,items: [{ id:1, text: 'Real-Time', icon: 'mdi-clock' },{ id:2, text: 'Audience', icon: 'mdi-account' },{ id:3, text: 'Conversions', icon: 'mdi-flag' },],},},})
综上所述,父组件向子组件传值需要三步:
1、首先在父组件中创建数据
2、然后再html代码中用:
绑定数据
3、最后在子组件注册的代码中用props
接收数据
二、子组件向父组件传值:
我们在上面代码的基础上略作调整,加一个index传值
html代码:
<div id="app"><v-app><!-- @xxxx(xxxx要与子组件中的方法名对应) =后面跟父组件中的函数名($event接收子组件的值) --><list-group :listgroup="listgroup" @handleindex="handle($event)"></list-group></v-app>
</div>
子组件代码:
Vue.component('list-group', {props:['listgroup'],template:`<v-cardmax-width="300"tile><v-list rounded><v-list-item-group v-model="listgroup.item" color="primary"><v-list-itemv-for="(item, index) in listgroup.items":key="index" v-text="item.text" @click="$emit('handleindex',index)" //这里$emit就是子组件传值给父组件的方法,handleindex是方法名,index是数据></v-list-item></v-list-item-group></v-list></v-card>`})
父组件代码:
new Vue({el: '#app',vuetify: new Vuetify(),data: {listgroup:{item: 1,items: [{ id:1, text: 'Real-Time', icon: 'mdi-clock' },{ id:2, text: 'Audience', icon: 'mdi-account' },{ id:3, text: 'Conversions', icon: 'mdi-flag' },],},// 父组件中的值index:-1,},methods:{// 父组件中的函数,val接收子组件传过来的值,然后相应的修改自身的index变量handle: function(val){this.index = valconsole.log(this.index) //打印index}}})
综上,子组件向父组件传值也是三步:
1、在子组件中准备想传的那个值,然后用$emit
方法携带一个方法名
2、在html代码中用@
绑定子组件中的方法名,然后用$event
接收子组件中的值
3、父组件中随便找个参数接收即可
三、兄弟组件之间的传值:
之前我学习到的是创建事件中心的方法来实现,但是我想了一想发现,兄弟组件共同的父组件不就是事件中心吗,所以我们在上面的代码再略作修改看看能否实现效果(其实就是在上面的基础上再注册一个组件接收index的值就可测试)
html代码:
<div id="app"><v-app><!-- 列表组件绑定父组件中的函数 --><list-group :listgroup="listgroup" @handleindex="handle($event)"></list-group><!-- 测试组件绑定父组件中的index值 --><test-box :index="index"></test-box></v-app>
</div>
兄弟组件代码:
// 测试组件Vue.component('test-box',{props:['index'],template:`<div>{{index}}</div>`})// 列表组件Vue.component('list-group', {props:['listgroup'],template:`<v-cardmax-width="300"tile><v-list rounded><v-list-item-group v-model="listgroup.item" color="primary"><v-list-itemv-for="(item, index) in listgroup.items":key="index" v-text="item.text" @click="$emit('handleindex',index)"></v-list-item></v-list-item-group></v-list></v-card>`})
父组件代码:
new Vue({el: '#app',vuetify: new Vuetify(),data: {listgroup:{item: 1,items: [{ id:1, text: 'Real-Time', icon: 'mdi-clock' },{ id:2, text: 'Audience', icon: 'mdi-account' },{ id:3, text: 'Conversions', icon: 'mdi-flag' },],},// 父组件中的值index:-1,},methods:{// 父组件中的函数,val接收子组件传过来的值,然后相应的修改自身的index变量handle: function(val){this.index = valconsole.log(this.index) //打印index}}})
这是最后的完整版代码,包括了父组件向子组件传值,子组件向父组件传值,兄弟组件之间的传值
综上,兄弟组件之间的传值包括以下三步(这里的测试组件和列表组件是兄弟组件关系):
1、列表组件给父组件传值
2、父组件接收列表组件的值,并且利用函数的方式修改了自身的index
的值
3、父组件向测试组件传index
的值
最后附上效果:
vue变量传值_vue组件与组件之间传值相关推荐
- vue变量传值_VUE 学习——父组件传值给子组件
在我们编写前端代码时,经常遇到的一种场景,子组件需要使用父组件的值,这种情况下,我们可以使用props帮助我们进行父子组件间的通信.这里我们先模拟一个场景,展示如何使用. 场景:在父组件修改值,传递给 ...
- vue 日历翻拍效果_VUE实现日历组件功能
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是 ...
- MUI+Htmlplus开发APP实现页面之间传值
为了保持每个界面之间的数据通讯和相关联性,页面之间传值是开发hybrid app常见的一个问题.怎么实现页面之间数据交互呢?我试过两种方法: 利用缓存 mui页面的extras参数 利用缓存实现页面之 ...
- vue变量传值_Vue各类组件之间传值的实现方式
1.父组件向子组件传值 首先在父组件定义好数据,接着将子组件导入到父组件中.父组件只要在调用子组件的地方使用v-bind指令定义一个属性,并传值在该属性中即可,此时父组件的使命完成,请看下面关键代码: ...
- 【Vue组件传值】不同的组件之间的数据传值方法
不同的组件之间的数据传值方法 父组件向子孙组件传值.通过方法provide / inject (1)provide/inject的介绍: provide/ inject 是vue2.2.0新增的api ...
- vue父子组件之间传值的方法
vue父子组件之间传值的方法 一.基本父子传值 父传子 方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用 父组件代码: <template>< ...
- vue组件之间传值的几种方式
vue组件传值 父子组件之间传值.几种常见方式 第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...
- vue中组件之间传值的六种方式(完整版)
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B ...
- 深入理解Vue 组件之间传值
一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
最新文章
- 便捷,轻巧的Groovy数据库操作
- VC++6 开发MFC扩展DLL以及MFC DLL可以包含界面
- python与shell的3种交互方式介绍
- 值得使用的CSS库添加图像悬停效果!
- JAVA大数据-Week3-DAY5
- python入门教程收藏_python入门教程:超详细保你2小时学会Python,快来收藏看看...
- 【引用】MySQL定时任务
- 清理300多台MySQL数据库的过期binlog日志
- java收到邮件后短信提醒_java邮件发送和短信发送(二)
- xtragrid 某个值 查找_XtraPivotGrid根据列(行)的汇总值对列(行)标头进行查找...
- ELK日志分析系统迁移记录
- 有道云笔记Markdown图片链接解决办法
- Python-scrapy爬虫
- 网络打印机拒绝访问,无法连接处理方法汇总
- 《高效阅读——20分钟读懂一本书》读书总结
- 数据库服务器硬件运行环境,数据库及WEB服务器环境部署硬件配置模板
- QQ游戏当前在线总人数查看
- 蚌埠学院教务系统自动导入课程表到小米/Redmi手机小爱同学课程表使用说明
- sencha touch 相机,相册调用
- 华为防火墙(VRRP)