子組件和父組件通信
- 在父組件中使用子組件時(shí)自定義事件，設(shè)置該事件的回調(diào)函數(shù)
- 在子組件中需要傳數(shù)據(jù)給父組件時(shí)調(diào)用this.$emit觸發(fā)上面自定義的事件，并且設(shè)置要發(fā)生給父組件的數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>展示子組件的數(shù)據(jù)：{{pMsg}}</p>
<hr/>
<my-component v-on:my-click="show"></my-component>
</div>
<script src="./vue.js"></script>
<script>
//父組件--->使用子組件時(shí)通過(guò)自定義屬性攜帶值--->子組件通過(guò)props接收自定義屬性的值
//子組件和父組件通信：
// 在父組件中使用子組件時(shí)自定義事件，設(shè)置該事件的回調(diào)函數(shù)
// 在子組件中需要傳數(shù)據(jù)給父組件時(shí)調(diào)用this.$emit觸發(fā)上面自定義的事件，并且設(shè)置要發(fā)生給父組件的數(shù)據(jù)
//組件定義
const MyComponent={//組件選項(xiàng)
template:`<div>
<input v-model="msg"/>
<button @click="send">發(fā)送數(shù)據(jù)給父組件</button>
</div>`,
data(){
return {
msg:'hello'
}
},
methods:{
send(){
//發(fā)送是數(shù)據(jù)給父子組件
//參數(shù)1指定的事件
//參數(shù)2...:發(fā)送給對(duì)應(yīng)事件回調(diào)函數(shù)的數(shù)據(jù)
this.$emit('my-click',this.msg);//觸發(fā)某個(gè)事件執(zhí)行
}
}
}
new Vue({
el:"#app",
components:{
MyComponent //等效于：MyComponent:MyComponent
},
data:{
pMsg:''
},
methods:{
show(param1){
console.log('接收到了子組件的數(shù)據(jù)...',param1);
this.pMsg=param1;//將子組件的數(shù)據(jù)賦值給父組件
}
}
})
</script>
</body>
</html>
父子組件通信
父組件可以使用props屬性將值傳給子組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-omponent>
</div>
<script src="./vue.js"></script>
<script>
//定義組件
const myComponent={
template:`<div>
<h1>{{title}}</h1>
<ul>
<li v-for="d in list">{{d.name}}</li>
</ul>
</div>`,
//props:['title','list']
//設(shè)置props驗(yàn)證
props:{
//key(所接收到的數(shù)據(jù))
title:{
type:String,
// required:true
default: 'hello'
}
}
}
new Vue({
el:"#app",
components:{
myComponent
}
})
</script>
</body>
</html>
非父子組件通信
有兩種方法：1）使用第三方來(lái)處理，new vue()；2）使用vuex 狀態(tài)管理模式
下面主要講解使用事件總線來(lái)管理
- 發(fā)送方：
- 通過(guò)bus.$emit觸發(fā)事件，并且將數(shù)據(jù)作為參數(shù)發(fā)給接收放
- bus.$emit('my-send',val);
- 接收方：
- 通過(guò)bus.$on監(jiān)聽(tīng)事件，監(jiān)聽(tīng)時(shí)設(shè)置回調(diào)函數(shù)，當(dāng)事件觸發(fā)時(shí)該回調(diào)函數(shù)就要調(diào)用
- bus.$on('my-send',function(val){ console.log('收到了發(fā)送方的數(shù)據(jù)',val) })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component1></my-component1>
<hr/>
<my-component2></my-component2>
</div>
<script src="./vue.js"></script>
<script>
/**
* 非父子：1)使用new Vue()作為事件總線實(shí)現(xiàn)各個(gè)組件間的通信
* 2)使用Vuex 狀態(tài)管理模式實(shí)現(xiàn)非父子間的通信
*
* 假設(shè)：MyComponent1發(fā)送'hello,組件2'給MyComponent2
*/
const bus=new Vue();//創(chuàng)建空的Vue實(shí)例充當(dāng)事件總線
/**
* 發(fā)送方：
* 通過(guò)bus.$emit觸發(fā)事件，并且將數(shù)據(jù)作為參數(shù)發(fā)給接收放
* bus.$emit('my-send',val);
* 接收方：
* 通過(guò)bus.$on監(jiān)聽(tīng)事件，監(jiān)聽(tīng)時(shí)設(shè)置回調(diào)函數(shù)，當(dāng)事件觸發(fā)時(shí)該回調(diào)函數(shù)就要調(diào)用
* bus.$on('my-send',function(val){
* console.log('收到了發(fā)送方的數(shù)據(jù)',val)
* })
*/
const MyComponent1={
template:`<div>
<h1>組件1</h1>
<button @click="send">發(fā)送數(shù)據(jù)給組件2</button>
</div>`,
data(){
return {
msg:'hello,組件2'
}
},
methods:{
//發(fā)送數(shù)據(jù)
send(){
bus.$emit('my-send',this.msg);
}
}
}
const MyComponent2={
template:`
<div>
<h2>組件2..</h2>
<p>{{msg}}</p>
</div>
`,
data(){
return {
msg:''
}
},
created() {
//接收數(shù)據(jù)
bus.$on('my-send',(val)=>{
this.msg=val
})
},
}
new Vue({
el:"#app",
components:{
MyComponent1,
MyComponent2
}
})
</script>
</body>
</html>
