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) 复用组件时,方法不 ...
随机推荐
- linux的pthread_self与gettid的返回值和开销的区别
linux的pthread_self与gettid的返回值和开销的区别 linux的pthread_self与gettid的返回值和开销的区别 分类: 一些思考 2012-05-18 12:25 17 ...
- [COGS 0407][NOIP 2009] 靶形数独
407. [NOIP2009] 靶形数独 ★★ 输入文件:sudoku.in 输出文件:sudoku.out 简单对比时间限制:5 s 内存限制:128 MB [问题描述] 小城和小华 ...
- Python 处理脚本的命令行参数(二)：使用click
安装click pip install click 使用步骤 使用@click.command() 装饰一个函数,使之成为命令行接口 使用@click.option() 等装饰函数,为其添加命令行选项 ...
- HttpClient简述
HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性,它不仅是客户端发送Http请求变得容易,而且也方便了开发人员测试接口(基于Http协议的),即提高了开发的效率 ...
- scala集合与数据结构
1.数据结构特点 Scala同时支持可变集合和不可变集合,不可变集合从不可变,可以安全的并发访问. 两个主要的包: 不可变集合:scala.collection.immutable 可变集合: sca ...
- 超慢速移动动画使用CSS3实现流畅效果
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVpbGVpZm9yZXZlcg==/font/5a6L5L2T/fontsize/400/fill/I0 ...
- BZOJ1972:[SDOI2010]猪国杀(模拟)
Description 太长就不贴过来了 Solution 这个题是真的不难写……唯一的难度就在于理解题意上面……感觉这就是个阅读理解题啊…… 而且你三国杀玩的越多可能就越难写因为你无法理解那些猪的思 ...
- 1295. [SCOI2009]最长距离【最短路】
Description windy有一块矩形土地,被分为 N*M 块 1*1 的小格子. 有的格子含有障碍物. 如果从格子A可以走到格子B,那么两个格子的距离就为两个格子中心的欧几里德距离. 如果从格 ...
- windows C++ new/delete内存大小
转载自:https://blog.csdn.net/will_hsbsch/article/details/21124055 windows 上,但使用C++语言new一块内存,用指针P指向这块内存, ...
- leetcode 121. Best Time to Buy and Sell Stock 、122.Best Time to Buy and Sell Stock II 、309. Best Time to Buy and Sell Stock with Cooldown
121. Best Time to Buy and Sell Stock 题目的要求是只买卖一次,买的价格越低,卖的价格越高,肯定收益就越大 遍历整个数组,维护一个当前位置之前最低的买入价格,然后每次 ...