目次
コンポーネント通信は、Vueの非常に一般的で重要な部分です。
1.親から子のコンポーネントへの通信
1.1小道具
小道具は最も一般的に使用される方法です。
// 父
<template>
<child-component1 :name="name"></child-component1>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
}
</script>
// 子
<template>
<div>姓名：{
{
name }}</div>
</template>
<script>
export default {
props: {
name: {
type: String, // String、Number、Boolean、Array、Object、Date、Function、Symbol
default: '', // 默认值
required: true, // 定义该 prop 是否是必填项。如果为true未传值则会抛出警告
validator：Function, // 自定义验证参数，如果函数返回false则会抛出警告
}
},
}
</script>
小道具の簡単な構文
props: ['name']
propsは文字列タイプのみを定義します
props: {
name: String
}
パラメータがマルチタイプの場合は小道具
props: {
name: ['String', 'Number']
}
1.2参照
この方法はめったに使用されません。
// 父
<template>
<div class="page">
<child-component1 :name="name" ref="cp"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
mounted () {
this.$refs.cp.age = 18
}
}
</script>
// 子
<template>
<div class="container">
<div>姓名：{
{
name }}</div>
<div>年龄：{
{
age }}</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
data () {
return {
age: 0
}
}
}
</script>
1.3人の子供
インスタンスは、親コンポーネントの子を介して取得されます。子は、親コンポーネント内の子コンポーネントのコレクションです。公式ドキュメントには、内部の順序は保証されていないと記載されています。
this.$children[0].age = 30
2.子は親コンポーネントと通信します
2.1放出
子コンポーネントを介してイベントをディスパッチし、親コンポーネントはイベントをリッスンして値を渡します。
// 父
<template>
<div class="page">
<child-component1 @onChildComponen="onChildComponen"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
methods: {
onChildComponen (data) {
alert(data)
}
}
}
</script>
// 子
<template>
<div class="container">
<div @click="onClick">emit</div>
</div>
</template>
<script>
export default {
methods: {
onClick () {
this.$emit('onChildComponen', 1)
}
}
}
</script>
3サブコンポーネント通信
共通の親コンポーネントがあり、$ parent。$ emitを介してイベントをディスパッチし、$ parent。$ onを介してイベントをリッスンする必要があります。
3.1親
// 父
<template>
<div class="page">
<child-component1 ></child-component1>
<child-component2 ></child-component2>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
import ChildComponent2 from '@/components/ChildComponent2.vue'
export default {
components: {
ChildComponent1,
ChildComponent2
}
}
</script>
// 子1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
export default {
created () {
},
methods: {
onClick () {
this.$parent.$emit('hi', '你好')
}
}
}
</script>
// 子2
<template>
<div class="container">
<div>子组件2</div>
</div>
</template>
<script>
export default {
created () {
this.$parent.$on('hi', (data) => {
alert(data)
})
},
methods: {
}
}
</script>
4父は孫に価値を渡す
4.1注入を提供する
コンポーネントレベルが多すぎる場合に使用します。
親コンポーネントは提供を提供し、他のコンポーネントは注入を通じて値を取得します。これは、コンポーネントライブラリの開発でよく使用されます。
// 父
provide() {
return {
name: '小明'
}
}
// 子
inject: ['name']
5任意の2つのコンポーネント間
5.1 eventBus
eventBusを介して、同じバスを参照して通信します
// bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
import Bus from '@/bus.js'
export default {
created () {
},
methods: {
onClick () {
Bus.$emit('hi', '你好')
}
}
}
</script>
6. vuex
Vuexの状態ストレージは応答性があります。Vueコンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、対応するコンポーネントがそれに応じて更新されます。