vue中组件间的传参
1.父传子
父组件准备一个数据，通过自定义属性给子组件赋值，进行传递
在子组件中通过 props 属性来接收参数
<body>
<div id="app">
<son passdata="msg"></son>
</div>
</body>
<script>
Vue.component('son', {
template: '<div>父组件的数据为：{{ passdata }}</div>'，
props: ['passdata']
})
new Vue({
el: '#app',
data: {
msg: '父组件数据'
}
})
</script>
2.子传父
在子组件准备一个数据，通过 this.$emit('自定义事件', '参数'),进行传递。this.$emit 相当于要执行子组件的自定义事件，并且传入参数
在父组件中给子组件注册好自定义事件，并且实现这个方法，就可以得到参数了。<son @自定义事件="getval">
<body>
<div id="app">
//myevent是子组件中的事件
<son @myevent='getVal'></son>
</div>
</body>
<script>
Vue.component('son', {
//①通过事件触发passval方法
template: `<div>给父组件传参<button @click="passval">传参</button></div>`,
data(){
return {
son: 'son数据'
}
},
methods: {
passval(){
//②执行子组件中的myevent事件，通过$emit进行传递（this.son为传递的数据）
this.$emit('myevent', this.son)
}
}
})
new Vue({
el: '#app',
methods: {
//③value就是传递过来的数据
getVal(value){
console.log(value)
}
}
})
</script>
3.并列组件传参
创建一个公用的 bus (vue 实例) var vm = new Vue()
在 A 组件传入数据 vm.$emit('passval', this.name)
在 B 组件接收数据 vm.$on('passval' ,function(value){})
<body>
<div id="app">
<coma></coma>
<comb></comb>
</div>
</body>
<script>
//①创建一个公共实例
var vm = new Vue()
Vue.component('coma', {
//通过事件触发 myclick方法去传参
template: `<div><button @click="myclick"></button></div>`，
data() {
return {
name: 'coma'
}
},
methods: {
myclick: function(){
//向公共实例传入数据
vm.$emit('passval', this.name)
}
}
})
Vue.component('comb', {
template: `<div>comb</div>`,
mounted() {
//接收数据
vm.$on('passval', function(value){
console.log(value)
})
}
})
new Vue({
el: '#app'
})
</script>
vue中组件间的传参的更多相关文章
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- 040——VUE中组件之组件间的数据参props的使用实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
随机推荐
- ZT 设计模式六大原则（1）：单一职责原则
zt 设计模式六大原则(1):单一职责原则 分类: 设计模式 2012-02-21 09:52 25059人阅读 评论(65) 收藏 举报 设计模式stringclass编程 (THERE SHOUL ...
- 异常处理与MiniDump详解(2) 智能指针与C++异常
write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 一. 综述 <异常处理与MiniDump详解(1) C++异常>稍 ...
- 【转】ios 抓取 tcp/udp 包
原文: http://useyourloaf.com/blog/2012/02/07/remote-packet-capture-for-ios-devices.html Remote Packet ...
- MySQL5.7 不同操作系统下的主从配置
1. 服务器信息 1.1 Ubuntu 17.0.4 (Master服务器) MySQL版本: 5.7.20 主数据库:dslbcp IP: 192.168.12.130 3306 1.2 Wind ...
- mysql-存储过程（转载）
本来想自己写存储过程的,但是看到别人写的很全面,就直接转载过来了. 转自(http://www.cnblogs.com/exmyth/p/3303470.html) 14.1.1 创建存储过程 MyS ...
- Java（Android）编程思想笔记03：在Android开发中使用MVP模式
1. MVP模式简介: MVC模式相信大家肯定是比较熟悉的:M-Model-模型.V-View-视图.C-Controller-控制器. MVP作为MVC的演化版本,那么类似的MVP所对应的意义:M- ...
- 真实世界中的 Swift 性能优化
那么有什么因素会导致代码运行缓慢呢?当您在编写代码并选择架构的时候,深刻认识到这些架构所带来的影响是非常重要的.我将首先谈一谈:如何理解内联.动态调度与静态调度之间的权衡,以及相关结构是如何分配内存的 ...
- BZOJ1048:[HAOI2007]分割矩阵(记忆化搜索DP)
Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个), 这样分割了(n-1)次后,原矩阵被分割成 ...
- BZOJ3697:采药人的路径(点分治)
Description 采药人的药田是一个树状结构,每条路径上都种植着同种药材. 采药人以自己对药材独到的见解,对每种药材进行了分类.大致分为两类,一种是阴性的,一种是阳性的. 采药人每天都要进行采药 ...
- 【[NOI2009]管道取珠】
--\(shallwe\):这道题是\(noipDay2T2\)难度 好一个\(Day2T2\)难度啊,我觉得我可以退役了 平方和好像没有什么办法可以快速统计,于是考虑转化一下 我们可以将题意转化成这 ...