父傳子（父->子）
props
在組件數(shù)據(jù)管理中套才，我們知道，可以利用porps將父組件數(shù)據(jù)傳遞給子組件终畅。
示例
Generator1.vue
<template>
<h1> 一代 </h1>
<Generator2 info="我是一代傳過去的"></Generator2>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/數(shù)據(jù)傳遞/Generator2';
export default defineComponent({
setup() {
},
components: { Generator2 }
})
</script>
Generator2.vue
<template>
<div>
<h1>二代</h1>
<span>來自一代的信息: {{ info }}</span>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup() {},
props: {
info: {
type: String
}
},
data() {},
})
</script>
slot
slot也算是一種從父組件向子組件傳遞消息的一種方式宏所。
示例
Generator1.vue
<template>
<h1> 一代 </h1>
<Generator2 info="我是一代傳過去的">
<template v-slot:content>
<h1>slot</h1>
<div>我是一代傳過去的內(nèi)容</div>
</template>
</Generator2>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/數(shù)據(jù)傳遞/Generator2';
export default defineComponent({
setup() {
},
components: { Generator2 }
})
</script>
Generator2.vue
<template>
<div>
<h1>二代</h1>
<span>來自一代的信息: {{ info }}</span>
<slot name="content"></slot>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup() {},
props: {
info: {
type: String
}
},
data() {},
})
</script>
祖先傳后代
有時可能從上至下有多代傳遞命咐，那么自然可以使用props一代一代傳下去诈铛，也可以使用provider/inject乙各。
示例
Generator1.vue
<template>
<h1> 一代 </h1>
<Generator2 info="我是一代傳過去的">
<template v-slot:content>
<h1>slot</h1>
<div>我是一代傳過去的內(nèi)容</div>
</template>
</Generator2>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/數(shù)據(jù)傳遞/Generator2';
export default defineComponent({
setup() {
},
provide: {
message: '祖?zhèn)鲗氊? 務(wù)必收好！'
},
components: { Generator2 }
})
</script>
Generator2.vue
<template>
<div>
<h1>二代</h1>
<span>來自一代的信息: {{ info }}</span>
<slot name="content"></slot>
<Generator3></Generator3>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api';
import Generator3 from '@/components/數(shù)據(jù)傳遞/Generator3';
export default defineComponent({
setup() {},
components: { Generator3 },
props: {
info: {
type: String
}
},
data() {},
})
</script>
Generator3.vue
<template>
<div>
<h1>三代</h1>
<span>來自一代的信息: {{ message }}</span>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup() {},
data() {},
inject: ['message'],
})
</script>
子傳父
在上面的例子中幢竹，數(shù)據(jù)流都是自上而下的耳峦，利用on/$emit()事件的方式，也可以實現(xiàn)在下而上的數(shù)據(jù)傳遞焕毫。
示例
Generator4.vue
<template>
<h1> 四代 </h1>
<div>
<span>來自子代的內(nèi)容： {{ childContent }}</span>
</div>
<Generator5 v-on:changeContent="change"></Generator5>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import Generator5 from '@/components/數(shù)據(jù)傳遞/Generator5';
export default defineComponent({
setup() {
},
components: { Generator5 },
data() {
return {
childContent: '',
}
},
methods: {
change(val) {
this.childContent = val.content;
},
}
})
</script>
Generator5.vue
<template>
<h1> 五代 </h1>
<button @click="click">按鈕</button>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup() {},
methods: {
click() {
this.$emit('changeContent', {content: '我是子組件傳遞給父組件的'});
}
}
})
</script>
總結(jié)
除了上面的一些方法蹲坷，關(guān)于數(shù)據(jù)的處理其實常用的還有vuex,由于之后還會詳細學(xué)習(xí)，便不在這里做介紹了邑飒。下面的bus也會在之后單獨講解循签，也不在此做過多的介紹，就是利用監(jiān)聽者模式實現(xiàn)的一種傳遞數(shù)據(jù)的方式疙咸。還有就是利用選擇的方式:children與 ref县匠，不是主動傳遞的。
向下傳遞
props, provider/inject, slot, vuex， bus
向上傳遞
on/emit, vuex, bus,
無關(guān)組件傳遞
vuex聚唐，bus
