詳細vueでのデータ転送(親伝子、子伝父、兄弟間およびvuex)コードの添付
26833 ワード
VUEにおけるデータ転送は
1.親伝子(props)
2.子の親(サブスクリプションのパブリッシュ)
(1)、vueのインスタンス
3.兄弟間伝達(eventBus)
(1)、導入サードパーティ
vuex
プロジェクトコンポーネントが少ない場合は、vuexを使用する必要はありません.プロジェクトのデータが複雑で、コンポーネントが多い場合は、vuexを使用することをお勧めします.
である.1.父子2.子伝父兄弟の間で伝える1.親伝子(props)
？ 1. 親コンポーネントのデータを動的属性でサブコンポーネントの行間属性にする.2.サブアセンブリでpropsという属性で受信、(オブジェクト、配列)3.サブコンポーネントでダイナミックなプロパティ名を使用して一貫性を維持します.<body>
<div id="app">
<!-- -->
<!-- -->
<child :m="msg" :t="hh"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let child = {
data(){
return {
num:100,
}
},
props:["m","t"],// props
template:"{{m}}{{t}}"// props ；
}
let vm = new Vue({
el:"#app",
data:{
msg:" ",
hh:" "
},
components:{
child
}
});
</script>
</body>
2.子の親(サブスクリプションのパブリッシュ)
(1)、vueのインスタンス
methodsにメソッドを書き込む(2)、サブアセンブリラベルの行間属性にカスタムメソッド@ =“ ”を購読する(3)、サブアセンブリのメソッドに$emitを介してカスタムイベントをパブリッシュする(4)、サブアセンブリのtemplate (clickなど)<body>
<div id="app">
{{money}}
<!-- -->
<son :m="money" @changemoney="change"></son>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// vue ， ；
let son ={
data(){
return {}
},
props:["m"],// props ；
methods:{
f(){
// $emit :
this.$emit("changemoney",3000);
}
},
template:"{{m}}"
};
let vm = new Vue({
el:"#app",
data:{
money:200
},
methods:{
change(val){// ，$emit change ；
this.money=val;
}
},
components:{
son
}
})
</script>
</body>
3.兄弟間伝達(eventBus)
(1)、導入サードパーティ
new vueはeventBus(2)、コンポーネントにおけるcreatedにおける購読方法eventBus.$on(" ",methods )(3)、別の兄弟コンポーネントにおけるmethodsに関数を書き、関数にeventBusによる購読方法eventBus.$emit(" ")(4)、コンポーネントにおけるtemplate (例えばclick)を発行する<body>
<div id="app">
<bro1></bro1>
<bro2></bro2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//
let eventBus = new Vue;// ；
let bro1 = {
data(){
return {
color:" "
}
},
created(){
// eventBus changeGreen
eventBus.$on("changeGreen",this.changeGreen)
},
methods:{
changeGreen(){
this.color=" "
},
fn2(){
eventBus.$emit("changeRed")
}
},
template:"{{color}}"
};
let bro2 = {
data(){
return {
color:" "
}
},
created(){
eventBus.$on("changeRed",this.changeRed)
},
methods:{
changeRed(){
this.color=" "
},
fn1(){
// button ， eventBus changeGreen ； changeGreen ；
eventBus.$emit("changeGreen")
}
},
template:"{{color}}"
};
let vm = new Vue({
el:"#app",
data:{
},
components:{
bro1,
bro2
}
})
</script>
</body>
vuex
プロジェクトコンポーネントが少ない場合は、vuexを使用する必要はありません.プロジェクトのデータが複雑で、コンポーネントが多い場合は、vuexを使用することをお勧めします.
vuex:vue専用です.jsが設計した状態管理モードは、すべてのコンポーネントの状態を集中的に記憶し、管理することを採用している.すべてのコンポーネントが共有するデータをstoreに抽出する.変更や管理が容易である.(1). vueXデータは です.storeのデータが変更されると、依存するすべてのコンポーネントが効率的に更新されます.(2).storeの状態を直接修正することはできません. store commitに対応するmutationです.<body>
<div id="app">
<first></first>
<second></second>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vuex/dist/vuex.js"></script>
<script>
let state = {
count:0,
shop:[{name:" "},{name:" "}]
}
// store
let store = new Vuex.Store({
state,
mutations:{
// ； store ；
// commit
// mutation store ；
add_count(state){// state vueX state;
state.count++;
}
}
});
let first = {
data(){
return {}
},
methods:{
add(){
//commit ， mutation
this.$store.commit("add_count");
}
},
// VueX.mapState: vuex state ， ；
computed:Vuex.mapState(["shop"]),
// $store ；
template:"{{this.$store.state.count}}{{a.name}} "
}
let second = {
data(){
return {}
},
template:"{{this.$store.state.count}}"
}
let vm = new Vue({
el:"#app",
data:{
},
components:{
first,
second
},
store// vue $store ， ； $store
});
</script>
</body>