vue組件通信-創(chuàng)新互聯(lián)

vue組件通信分為橫向和縱向。

創(chuàng)新互聯(lián)專(zhuān)注于合江網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供合江營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，合江網(wǎng)站制作、合江網(wǎng)頁(yè)設(shè)計(jì)、合江網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造合江網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供合江網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

**縱向**

1. props 和 $emit

props：接收來(lái)自父組件的數(shù)據(jù)

$emit：觸發(fā)事件

<!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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
childToParentData:?'I?am?the?data?of?Parent!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>

????????????????????<Child?:childData="msg"?@childHandler="handerFn"/>

????????????????????<p>childToParentData:?{{childToParentData}}</p>
????????????????</div>`,
methods:?{
handerFn(val){
console.log(val);
this.childToParentData?=?val;
},
}
})

Vue.component('Child',?{
data(){
return?{
msg:?'I?am?the?data?of?Child!',
inputVal:?this.childData,
};
},
props:?['childData'],
template:?`<div>
????????????????????<p>?I?am?the?child?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<input?v-model="inputVal"?@input="changeVal(inputVal)"?/>
????????????????</div>`,
methods:?{
changeVal(val){
//?通過(guò)?$emit?觸發(fā)，參數(shù)為?事件名，參數(shù)
this.$emit('childHandler',?val);
}
}
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
<pre>
子組件向父組件傳值
1、自定義事件
2、子組件原生事件
3、原生事件的處理函數(shù)中通過(guò)$emit觸發(fā)自定義事件
注：子組件不能修改props中的值，否則報(bào)錯(cuò)，可通過(guò)子組件自己的數(shù)據(jù)接收props中的值來(lái)解決
</pre>
</body>
</html>

2. $parent 和 $children

后代組件可以通過(guò)$parent.$parent.$parent這種形式跨級(jí)通信

父組件可以通過(guò)$children[0].$children[0]這種形式跨級(jí)通信，如果有多個(gè)子組件，索引不好控制

<!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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
grandToParent:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>
????????????????????<input?v-model="msg"?@input="consoleFn"/>?
????????????????????<p?>{{grandToParent}}</p>?????????????????????
????????????????????<hr?/>
????????????????????<Child/>
????????????????</div>`,
methods:?{
consoleFn(){
this.$children[0].parentMsg?=?this.msg;
},
},
})

Vue.component('Child',?{
data(){
return?{
msg:?'I?am?the?data?of?Child!',
parentMsg:?'',
grandToChild:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?child?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn">attr</button>?
????????????????????<p?>{{parentMsg}}</p>???????????????????
????????????????????<p?>{{grandToChild}}</p>???????????????????
????????????????????<hr?/>
????????????????????<GrandChild?/>
????????????????</div>`,
methods:?{
consoleFn(){
this.$children[0].childMsg?=?this.msg;
},
},
})

Vue.component('GrandChild',?{
data(){
return?{
msg:?'I?am?the?data?of?GrandChild!',
childMsg:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?GrandChild?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn"?>attr</button>
????????????????????<p?>{{childMsg}}</p>?
????????????????????<hr?/>
????????????????</div>`,
methods:?{
consoleFn(){
this.$parent.grandToChild?=?this.msg;
this.$parent.$parent.grandToParent?=?this.msg;
},
},
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
<pre>
$parent,?$children,?$root,?$parent.$parent
非響應(yīng)式，如果有多個(gè)直接子組件
</pre>
</body>
</html>

3. $attrs 和 $listeners

后代組件從$attrs獲取父組件傳給后代組件的數(shù)據(jù)

后代組件通過(guò)$emit觸發(fā)$listeners的事件將數(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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
childToParentData:?'I?am?the?data?of?Parent!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>
????????????????????<p>childToParentData:?{{childToParentData}}</p>
????????????????????<button?@click="consoleFn">attr</button>
????????????????????<br?/>
????????????????????<Child?:parentMsg="msg"?@childClick="parentHandler"?v-bind="$attrs"?v-on="$listeners"/>
????????????????</div>`,
//?inheritAttr:?false,
methods:?{
consoleFn(){
console.log(this.$attrs);??//?{}
console.log(this.$listeners);??//?{}
},
parentHandler(data){
console.log(data);
},
},
})

Vue.component('Child',?{
data(){
return?{
msg:?'I?am?the?data?of?Child!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?child?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn">attr</button>????????????????????
????????????????????<br?/>
????????????????????<GrandChild?:childMsg="msg"?@grandChildClick="childHandler"?v-bind="$attrs"?v-on="$listeners"/>
????????????????</div>`,
//?inheritAttr:?false,
methods:?{
consoleFn(){
console.log(this.$attrs);??//?{parentMsg:?}
console.log(this.$listeners);??//{childClick:?}
},
childHandler(data){
console.log(data);
},
},
})

Vue.component('GrandChild',?{
data(){
return?{
msg:?'I?am?the?data?of?GrandChild!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?GrandChild?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn"?>attr</button>
????????????????????<br?/>
????????????????</div>`,
//?inheritAttr:?false,
methods:?{
consoleFn(){
console.log(this.$attrs);??//?{parentMsg:?,?childMsg:?}
console.log(this.$listeners);???//{childClick:?,?grandChildClick:?}

this.$emit('childClick',?this.msg);??//?如果不收集，$emit只能觸發(fā)其父級(jí)的事件
this.$emit('grandChildClick',?this.msg);?
},
},
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
<pre>
1、$attrs收集屬性
2、$listeners收集事件
</pre>
</body>
</html>

4. provide 和 inject

父組件向后代組件單向傳遞數(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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
};
},
provide(){
return?{
parentMsg:?this.msg,
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>
????????????????????<input?v-model="msg"/>??<!--?provide和inject綁定并不是可響應(yīng)的，?所以msg的變化不會(huì)影響后代組件中已經(jīng)接收到的msg的值?-->
????????????????????<button?@click="consoleFn">attr</button>
????????????????????<hr?/>
????????????????????<Child/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(this);
},
},
})

Vue.component('Child',?{
data(){
return?{
msg:?'I?am?the?data?of?Child!',
};
},
provide:?{
childMsg:?'I?am?the?data?of?Child!',
},
inject:?['parentMsg'],
template:?`<div>
????????????????????<p>?I?am?the?child?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn">attr</button>?
????????????????????<p?>{{parentMsg}}</p>???????????????????
????????????????????<hr?/>
????????????????????<GrandChild?/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(this);
},
},
})

Vue.component('GrandChild',?{
data(){
return?{
msg:?'I?am?the?data?of?GrandChild!',
};
},
inject:?['parentMsg',?'childMsg'],
template:?`<div>
????????????????????<p>?I?am?the?GrandChild?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<button?@click="consoleFn"?>attr</button>
????????????????????<p?>{{parentMsg}}</p>?
????????????????????<p?>{{childMsg}}</p>?
????????????????????<hr?/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(this);
},
},
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
<pre>
單向
</pre>
</body>
</html>

**橫向**

1. 數(shù)據(jù)總線(xiàn)?

用一個(gè)中間變量保存數(shù)據(jù)

var bus = new Vue()?

?$on綁定事件

?$emit觸發(fā)事件

<!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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
var?bus?=?new?Vue();

//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>
????????????????????<button?@click="consoleFn">button</button>
????????????????????<br?/>
????????????????????<BrotherOne?/>
????????????????????<BrotherTwo?/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(bus);
},
},
})

Vue.component('BrotherOne',?{
data(){
return?{
msg:?'I?am?the?data?of?BrotherOne!',
fromBrother:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?BrotherOne?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<input?v-model="fromBrother"?@input="transformData"/>???????????????????
????????????????????<br?/>
????????????????</div>`,
methods:?{
transformData(){
bus.$emit('globalBus',?this.fromBrother);
},
},
})

Vue.component('BrotherTwo',?{
data(){
return?{
msg:?'I?am?the?data?of?BrotherTwo!',
fromBrother:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?BrotherTwo?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<p>fromBrother:?{{fromBrother}}</p>
????????????????????<button?@click="consoleFn"?>button</button>
????????????????????<br?/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(bus);
},
},
mounted(){
bus.$on('globalBus',?val?=>?{
this.fromBrother?=?val;
})
}
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
</body>
</html>

var bus = {}

<!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">

</div>
<script?src="./node_modules/vue/dist/vue.js"></script>
<script>
var?bus?=?{};

//?全局組件
Vue.component('Parent',?{
data(){
return?{
msg:?'I?am?the?data?of?Parent!',
};
},
template:?`<div>
????????????????????<p>?I?am?the?parent?component!</p>
????????????????????<button?@click="consoleFn">button</button>
????????????????????<br?/>
????????????????????<BrotherOne?/>
????????????????????<BrotherTwo?/>
????????????????</div>`,
methods:?{
consoleFn(){
console.log(bus);
},
},
})

Vue.component('BrotherOne',?{
data(){
return?{
msg:?'I?am?the?data?of?BrotherOne!',
fromBrother:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?BrotherOne?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<input?v-model="fromBrother"?@input="transformData"/>???????????????????
????????????????????<br?/>
????????????????</div>`,
methods:?{
transformData(){
bus['brotherOne']?=?{
'fromBrother':?this.fromBrother,
};
},
},
})

Vue.component('BrotherTwo',?{
data(){
return?{
msg:?'I?am?the?data?of?BrotherTwo!',
fromBrother:?'',
};
},
template:?`<div>
????????????????????<p>?I?am?the?BrotherTwo?component!</p>
????????????????????<p>{{msg}}</p>
????????????????????<p>fromBrother:?{{fromBrother}}</p>
????????????????????<button?@click="consoleFn"?>button</button>
????????????????????<br?/>
????????????????</div>`,
methods:?{
consoleFn(){
this.fromBrother?=?bus['brotherOne']['fromBrother'];
},
},
})
var?App?=?{
template:?`<div>
????????????????????<Parent?/>
????????????????</div>`,
};
var?vm?=?new?Vue({
el:?'#app',
data(){
return?{
};
},
components:?{
App
},
methods:?{

},
template:?`
????????????<App?/>
????????????`
})
</script>
</body>
</html>

創(chuàng)新互聯(lián)www.cdcxhl.cn，專(zhuān)業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。

當(dāng)前名稱(chēng)：vue組件通信-創(chuàng)新互聯(lián)
文章出自：http://www.jbt999.com/article34/dsoose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、微信公眾號(hào)、移動(dòng)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容