vue 非子父组件间的数据传递

时间 2019-12-15

标签 vue 组件数据传递繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 非子父组件间的数据传递</title>
<script src='vue.js'></script>
</head>
<body>
html

}
var runoob2={

data(){
return{
name:'第二个组件'
}
},
template:'#runoob2',
methods:{
send(){
sub1.$emit('runoob2',this.name)
}
}函数

}
var runoob3={

data(){
return{
name:''
}
},
template:'#runoob3',
mounted:function(){
var self=this
// 此时this指向为上没空vue实例发生变化需提早定义好this var self=this
// sub1.$on('runoob1',function(name){
// console.log(this)
// self.name=name
// console.log(name)
// })this

// 箭头函数this指向不变
sub1.$on('runoob1',name=>{
console.log(this)
this.name=name
console.log(name)
})component

// 接收runoob2组件中的数据
sub1.$on('runoob2',name=>{
console.log(this)
this.name=name
console.log(name)
})
htm

}ip

}it

var sub=null
window.onload=function(){
sub= new Vue({
el:'#my',
components:{
'my-a':runoob1,
'my-b':runoob2,
'my-c':runoob3,
} io

});
}

</script>
<template id='runoob1'>
<div>
<h1>{{name}}</h1>
<button @click='send'>把数据发给runoob3</button>
</div>

</template>
<template id='runoob2'>
<div>
<h1>{{name}}</h1>
<button @click='send'>把数据发给runoob3</button>
</div>

</template>
<template id='runoob3'>
<div>
<h1>{{name}}</h1>
</div>

</template>
console