一、父组件向子组件传值
父组件中的数据在子组件中不能直接使用,要想在子组件中使用,步骤:
1、 在子组件配置props属性,属性中协商自定义属性名。
{
props:[’自定义属性名‘]
}
2、 在父组件中找到子组件标签。
<子组件标签 :自定义属性名="父组件要发送的数据"></子组件标签>
3、 在子组件中需要使用数据的地方,直接将第一步中自定义属性名当作data数据来使用。
<div>{{自定义属性名}}</div>
示例:
子组件:
父组件:
二、子组件向父组件传值
步骤:
1、在需要发送数据的子组件标签上绑定自定义事件,使用this.$emit()发送数据。
<div @click="自定义事件名1"></div>
methods:{
自定义方法名1(){
this.$emit("自定义时间名2",要发送的数据)
}
}
如果需要发送多个数据,
this.$emit("自定义时间名2",[要发送的数据1,要发送的数据1])
2、在父组件中找到子组件标签
<子组件标签名 @自定义事件名2=“新的方法名”></子组件标签名>
methods:{
新的方法名(data){
console.log(data)//data就是子组件发送过来的数据
}
}
三、非父子组件传值
1、通过建立一个第三方bus来做中转站,然后借用$emit 发送参数和 $on 来接受参数
建立一个bus.js
import Vue from 'vue'
export default Vue.prototype.bus = new Vue()
2、在main.js引入
import bus from './util/bus'
3、//发送信息组件
<template>
<button @click="changeBus()">bus</button>
</template>
...
methods: {
changeBus(){
this.bus.$emit("change",'yjw');
}
}
//接受信息组件
mounted(){
let self = this;
this.bus.$on('change',function(msg){
console.log(msg);
self.msg = msg;
})
}