子組件=》父組件
<body>
<div id="app">
<p>{{msg}}</p>
<child @child-send-msg="get"></child>
</div>
<template id="child">
<div>
<button @click="send">send</button>
</div>
</template>
<script>
new Vue({
data:{
msg:""
},
methods:{
get(res){
this.msg=res;
}
},
components:{
"child":{
template:"#child",
data(){
return {
childMsg:"子組件數(shù)據(jù)"
}
},
methods:{
send(){
this.$emit("child-send-msg",this.childMsg);
}
}
}
}
}).$mount("#app")
</script>
</body>
vue的組件之間的通信類似angular的父子層級之間通信，父組件獲取子組件數(shù)據(jù)步驟大概如下：
- 在子組設(shè)置事件，在該事件中設(shè)置this.$emit("自定義事件名稱"，數(shù)據(jù))來傳遞數(shù)據(jù)
- 在父模板中將子組件的$emit的自 定義的事件名稱，定義一個事件來接收
- 在父組件中被子組件自定義事件觸發(fā)的事件函數(shù)的參數(shù)就是接收到的數(shù)據(jù)，可以直接操作該數(shù)據(jù)
父組件=》子組件
<body>
<div id="app">
<p @click="parentChange">hello world</p>
<child :msg="parentMsg"></child>
</div>
<template id="child">
<div>
<p>this's child</p>
<span>{{msg}}</span>
</div>
</template>
<script>
new Vue({
data:{
parentMsg: "這是父組件數(shù)據(jù)"
},
methods:{
parentChange() {
this.parentMsg = "父組件數(shù)據(jù)變化了"
}
},
components:{
"child": {
template: "#child",
props: ["msg"]
}
}
}).$mount("#app")
//如果我們想要使用一個對象作為props傳遞所有的屬性，我們可以使用不帶任何參數(shù)的v-bing，例如現(xiàn)在有一個對象todo
//todo:{
//text:'learn',
//isComplete:false
//}
//<todo-item :=todo></todo-item>
//改寫法等價于
<todo-item
:text="todo.text"
:is-complete="todo.isCompltet"
></todo-item>
</script>
</body>
vue的子組件獲取父組件數(shù)據(jù)通過props方法，步驟如下：
- 在子組件中設(shè)置props屬性(數(shù)組或?qū)ο?
- 在數(shù)組中設(shè)置變量，用于以后來接收父組件的數(shù)據(jù)
- 在父組件模板中嵌入的子模板設(shè)置自定義屬性來接收父組件中的數(shù)據(jù)，格式， :props中自定義變量名=父組件數(shù)據(jù)
- 子組件即可使用父模板中的數(shù)據(jù)展示，或者通過 this.自定義變量名 的形式來調(diào)用父組件的數(shù)據(jù)
子組件更改父組件數(shù)據(jù)
在vue2.0版本剛剛推出時，vue中廢棄了.sync方法，如果子組件想要更改父組件數(shù)據(jù)，那么要求父組件的這些數(shù)據(jù)必須是父組件包裹在一個對象中將其返回給子組件的
<body>
<div id="app">
<p>{{parentMsg.parent}}</p>
<child :msg="parentMsg"></child>
</div>
<template id="child">
<div>
<p @click="click">{{msg.parent}}</p>
</div>
</template>
<script>
new Vue({
data:{
parentMsg:{
parent:"父組件數(shù)據(jù)"
}
},
components:{
"child":{
template:"#child",
props:["msg"],
methods:{
click(){
this.msg.parent="子組件改變了父組件數(shù)據(jù)"
}
}
},
}
}).$mount("#app")
</script>
</body>
但是在vue2.3版本中又再次加入了.sync方法
<body>
<div id="app">
<p>{{parent}}</p>
<child :msg.sync="parent"></child>
</div>
<template id="child">
<div>
<p @click="change">{{msg}}</p>
</div>
</template>
<script>
//如果我們要使用sync修飾符，那么我們不需要對父組件的數(shù)據(jù)用對象包裹，但需要注意的是，和1.0版本中的sync修飾符用法有一些區(qū)別，需要我們手動的對其進行觸發(fā)，格式如下：
//this.$emit("update:要修改的自定義的變量名", "修改后的數(shù)據(jù)")
new Vue({
data:{
parent:"父組件數(shù)據(jù)"
},
components:{
"child":{
template:"#child",
props:["msg"],
methods:{
change(){
this.$emit("update:msg","子組件改變了父組件數(shù)據(jù)");
}
}
}
}
}).$mount("#app")
</script>
</body>
vue的單一事件中心管理組件通信
那么如何在vue中實現(xiàn)同級之間的組件通信，可能我們會想到給兩個組件設(shè)置一個父組件然后通過子組件$emit傳遞數(shù)據(jù)給父組件，然后通過props來獲取，這是一個不錯的解決方法，但是在存在大量組件的情況下這種方法會很繁瑣，下面我們介紹一種更加便捷的方法
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
<script>
//首先建立一個空的實例對象
var vm = new Vue({})
//接下來創(chuàng)建組件
var A = {
template: `
<div>
<h4>this's A</h4>
<p>{{msg}}</p>
<input type="button" value="send" @click="send">
</div>
`,
data() {
return {
msg: "hello A"
}
},
methods: {
send() {
vm.$emit("msg-a", this.msg);//為A組件添加方法，在按鈕點擊時為實例vm添加msg-a事件，并發(fā)送A組件的數(shù)據(jù)：msg
}
}
},
B = {
template: `
<div>
<h4>this's B</h4>
<p>{{msg}}</p>
<input type="button" value="send" @click="send">
</div>
`,
data(){
return{
msg:"hello B"
}
},
methods:{
send(){
vm.$emit("msg-b",this.msg);
}
}
},
C={
template:`
<div>
<h4>this's C</h4>
<p>接收的A的數(shù)據(jù)是：{{a}}</p>
<p>接收的B的數(shù)據(jù)是：{}</p>
</div>
`,
data(){
return {
a:"",
b:""
}
},
mounted(){//mounted vue2.0生命周期函數(shù)，表示模板渲染完成執(zhí)行的操作
vm.$on("msg-a",function(data){ //監(jiān)聽實例vm的msg-a事件，并結(jié)接收是數(shù)據(jù)
this.a=data;
}.bind(this))
vm.$on("msg-b",function(data){
this.b=data;
}.bind(this))
}
}
new Vue({
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
}).$mount("#box")
//其實整體來看vue的單一事件中心管理的本質(zhì)就是通過利用實例方法，創(chuàng)建一個空的實例利用$emit觸發(fā)自定義事件的同時并將當前組件的數(shù)據(jù)綁定到實例對象上，在需要獲取該組件數(shù)據(jù)的組件中通過$on來接收之前的自定義的事件，并且接收之前被綁定的組件的數(shù)據(jù)到該組件的data中
</script>
</body>
