vue组件间相互传值

一般vue的组件之间的传值分为：父组件传子组件，子组件传父组件，任意组件之间传值。

1.父组件传子组件:（父组件通过v-bind（可以缩写为：）发送，子组件通过props接收）

//父组件中引入子组件B
<B v-bind:msg="msg"></B>import B from './B.vue'
data(){return{msg:'父组件给给子组件B的值'}
}，
components:{B
}//子组件B,通过props接收，可以通过数组接收，也可以通过对象形式接收。
props:['msg']
或者
prop:{msg:{type:String,      //数据的类型default:"",       //设置数据默认值required:true     //设置数据必填，如果没有传入，就会报错。}
}

注意：通过props接收的参数是只读的，不能修改。如果需要修改，则需要讲它赋值给自己data中的变量，再修改。

2.子组件传父组件：（使用自定义事件，实现传值）

子组件内：通过$emit发送。

//假如在sure方法中发送值：
data(){return{count:'10'}
}，
methods:{sure(){this.$emit('toParent',this.count);  //toParent是自定义事件名，this.count是需要给父组件的值}
}

父组件内：在实例化的子组件中，通过子组件内定义的自定义事件函数接收。

//在父组件中，引入并实例化子组件，并在实例化标签中通过子组件内定义的自定义事件接收值
<子组件 @toParent="getData"></子组件>data(){return{countFromSon:'',}
}，
methods:{getData(val){   //参数val就是子组件给父组件传来的值this.countFromSon=val;}
}

注意：假如在父组件实例化子组件的标签内，通过自定义事件定义的方法中有形参row，如：

<子组件 @toParent="getData(row)"></子组件>

那么在getData方法中接收来自子组件的数据时，就需要用到第二个默认参数$event，如：

getData(val,$event){ 此时的$event才是来自子组件的值，而val是事件方法中携带的row形参
this.countFromSon=$event;
}

3.任意组件之间传值：(通过中间量，结合$emit和$on)

一般使用两种方式进行任意组件之间传值，其原理一致，都是将传的值与vue实例相关联。

方式一：

首先：创建一个EventBus.js文件，引入并导出vue实例。

import Vue from 'vue';     //引入vue实例
export default new Vue();   //导出默认vue实例

然后：在发送方组件内引入EventBus.js，再通过bus.$emit自定义事件发送数据。

import bus from './eventBus.js';methods:{handSend(){bus.$emit('自定义事件名','要发生的数据');}
}

最后，在接收方组件内引入EventBus.js，再在created()生命周期函数中通过bus.$on接收数据

import bus from './eventBus.js';data(){return {getFatherData:''}
},
created(){bus.$on('事件名',val=>{    //val就是发送方组件传来的值。事件名要和发送方的自定义事件名保持一致this.getFatherData=val;})
}

方式二：

在项目全局入口文件main.js中，创建一个空的vue实例，并挂载到vue的原型上。

首先：在main.js中：

Vue.prototype.$bus=new vue();

然后，在发送方,通过this.$bus.$emit自定义事件发送数据

methods:{handSend(){this.$bus.$emit('自定义事件名','要发生的数据');}
}

最后，在接收方,在created()生命周期函数中通过this.$bus.$on接收数据

data(){return {getFatherData:''}
},
created(){this.$bus.$on('事件名',val=>{    //val就是发送方组件传来的值。事件名要和发送方的自定义事件名保持一致this.getFatherData=val;})
}

vue组件间相互传值相关推荐

Vue组件间的传值五大场景，你造吗？
摘要:组件是 vue.js最强大的功能之一,这五个组件间传值场景你了解吗? 本文分享自华为云社区<你了解Vue组件间传值五大场景吗?>,作者:北极光之夜. . 父组件向子组件传值: 比如有 ...
Vue 组件间的传值（通讯）
组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...
vue组件间的传值方式及方法调用汇总
1.传值 a.父组件传子组件方法一: 父页面: <myReportContent v-if="contentState==1" :paramsProps='paramsPr ...
Vue组件之间相互传值的方式
1父传子 1.1父组件 1.2子组件:在 props 中添加了元素之后,就不需要在 data 中再添加变量了 2子传父 2.1子组件 2.2父组件兄弟组件传值一:使用全局函数全局事件第一步: 在入 ...
vue 组件间的传值
子向父传递参数利用子组件中的 $meit 属性,注册事件,然后在父组件中,使用 $meit 定义的方法,在父组件中绑定事件:我们触发子组件的绑定 $meit 事件,就会触发父组件 ...
初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...

vue组件间相互传值

vue组件间相互传值相关推荐

最新文章

热门文章