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>

转载于:https://www.cnblogs.com/xhrr/p/10624834.html

vue中组件间的传参相关推荐

Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue中组件间通信的6种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...
@query传参_前端框架vue中query和params传参
注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...
MySQL在脚本中执行传参数_ZZW_shell脚本中的调用MYSQL传参及注意的问题
[oracle@ip9140 db_pcc]$ cat zzw_cc.sh #!/bin/bash z_user='pcc_csuser22' z_pass='pcc_csuser22' z_db=' ...
Vue组件之间的传参方式小总结
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试 ...
vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
jeecg-boot中popup实现动态传参
jeecg-boot中popup实现动态传参环境: 功能实现: 后话: 环境: 最近任务是基于jeecg-boot框架的,用的是jeecg-boot V2.4.0版. 功能实现: 有表"p ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...

vue中组件间的传参

vue中组件间的传参相关推荐

最新文章

热门文章