bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

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

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

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

**縱向**

1. props 和 $emit

props：接收來自父組件的數(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){
//?通過?$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ù)中通過$emit觸發(fā)自定義事件
注：子組件不能修改props中的值，否則報錯，可通過子組件自己的數(shù)據(jù)接收props中的值來解決
</pre>
</body>
</html>

2. $parent 和 $children

后代組件可以通過$parent.$parent.$parent這種形式跨級通信

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

<!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
非響應式，如果有多個直接子組件
</pre>
</body>
</html>

3. $attrs 和 $listeners

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

后代組件通過$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ā)其父級的事件
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綁定并不是可響應的，?所以msg的變化不會影響后代組件中已經(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ù)總線?

用一個中間變量保存數(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，專業(yè)提供香港、美國云服務器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡助力業(yè)務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務器買多久送多久。

當前名稱：vue組件通信-創(chuàng)新互聯(lián)
文章出自：http://vcdvsql.cn/article34/dsoose.html

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

廣告

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

成都網(wǎng)頁設計公司