vue 组件传参
2024-08-24 12:36:22
路由配好了 再传个参呗
注:组件信息流转的时候只能单向
1 > 父子传参
传参:通过属性
prop:传递数据
a.父组件传参给子组件
子组件:
<ul>
<li v-for="item in dataList"></li>
</ul>
export default {
prop: { //prop接收传过来的参数
dataList: {
type:Array,
required:true //校验
}
},
data() {
return {
dataList: this.dataList
}
}
}
父组件
<Position :data-list='List'></Position>
b.子组件传参给父组件
父组件传一个函数给子组件
子组件:
export default {
prop: ['id','onbuttonInfo'],
data() {
return {
posid: this.id,
title: 'abc'
}
},
mounted() {
this.onbuttonInfo(this.title)
}
}
父组件:
<Position :id='sid' :onbuttonInfo='handleButonInfo'>职位列表</Position>
methods:{
handleButonInfo (msg) {
console.log(msg)
}
}
注意:浏览器的坑 会把buttonInfo 都改成全小写
2 > 动态路由传参
方式一:path:'/main/:变量名'
方式二:
方法:
传:
this.$router.push({name: 'goodslist',params:{"list":this.list}})
接收:
data() {
return {
goodsList: this.$route.query.list,
val: ''
}
},
3 > 跳级组件传参 bus总线
1、components中建Bus.js文件
import Vue from 'vue'
const Bus = new Vue({
})
export default Bus
2、index。vue中
import Bus from '../Bus.js'
mounted() {
Bus.$on('on-msg',(data)=>{ //订阅 绑定事 接收参数
console.log(data);
})
}
3、positionList.vue
import Bus from './Bus.js'
methods:{
do() { //发布 传参
this.$router.push({name:'search',})
Bus.$emit('on-msg',120)
}
}
4 > vuex传参(重点)请查看我的vuex文章 啦啦~~~~
最新文章
- css学习归纳总结(三) 转
- UVA 10892 - LCM Cardinality(数学题)
- 比较C++中的4种类型转换方式
- sql语句使用游标修改表中数据
- Spring Data JPA教程, 第二部分: CRUD(翻译)
- windows身份验证模式和SQL server身份验证模式 有什么不同
- nginx插件ngx_lua
- 黑马程序员——String类
- 九度OnlineJudge之1020:最小长方形
- 二 APPIUM Android自动化 环境搭建
- 自定义组件-BreadcrumbTreeView 的使用
- 201521123077 《Java程序设计》第9周学习总结
- linux下(fdisk,gdisk,parted)三种分区工具比较
- linux 中mv命令
- License控制解决方案
- JFinal Web开发学习(二)目录、架构、package设计
- centos 7 安装 mysql 5.7
- 使用DOS访问数据库详解
- [js]事件篇
- BZOJ 4403: 序列统计 数学 lucas
热门文章
- nginx 启动关闭
- Nginx 详细介绍
- nsswitch.conf - 系统数据库及名字服务开关配置文件
- Error response from daemon: Container ************** is not running
- deletefile 与KILL
- Scrat
- JVM内存结构之本地方法栈
- 安装mod_rpaf让apache获取访客真实IP
- 粘性固定 position:sticky
- Python---Tkinter---贪吃蛇(稳定的外部环境,稳定的内心)