子组件
props: {
'seedId':String, //接收父组件的值,定义(允许)传过来的值得类型,seedId为变量,可直接使用
},
data() {
return {
msg:“554”
};
},
methods: {
hledClose(){
this.$emit('agreement', this.msg) //给父组件传值
console.log(this.$parent.msg)//读取父组件数据
}
}
父组件
<check-in :seedId="seedId" @agreement="agreement"></check-in> //渲染子组件的内容 ,seedId为要传给子组件的值,agreement为子组件传过来的值
import checkIn from './agreement4';//引入子组件
data:(){
retrue(){
seedId:'1'//定义的变量,可直接把该变量传给子组件
msg:'123'
}
}
created(){
this.$on("agreement",(msg)=>{//可监听子组件通过$emit传过来的方法
this.msg=msg
})
}
components:{//注册子组件
checkIn
},
metods:{
agreement(agreement){//接收子组件的值
this.seedId = '';
}
}
非父子组件传值(非父子组件之间的通信,必须要有公共的实例,比如js(可以是空的),才能使用 $emit 获取 $on 的数据参数,实现组件通信 )
第一个组件
import Bus from '../bus.js';
export default {
name: 'first',
data () {
return {
value: '我来自first.vue组件!'
}
},
methods:{
add(){// 定义add方法,并将msg通过txt传给second组件
Bus.$emit('txt',this.value);
}
}
}
第二个组件
import Bus from '../bus.js';
export default {
name: 'second',
data () {
return {
}
},
mounted:function(){
Bus.$on('txt',function(val){//监听first组件的txt事件
console.log(val);
});
}
}
注:两个组件引入的js必须要相同的一个js