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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。