【Vue3】组件间通信

props

父组件向子组件传递数据可以通过 props。

<!-- 父组件TodoList.vue -->
<template>
  <todo-item
    v-for="todo in todos"
    :key="todo.id"
    :title="todo.title"
  ></todo-item>
</template>

<script>
import TodoItem from '@/components/TodoItem.vue'

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  setup() {
    let todos = reactive(
      {id:1, title:eat},
      {id:2, title:sleep}
    )
    
    return {
      todos
    }
  }
}
</script>

<!-- 子组件TodoItem.vue -->
<template>
  <span>{{todo.title}}</span>
  <button></button>
</template>

<script>
export default {
  name: 'TodoItem',
  props: ['todo']
}
</script>

emit

子组件传递数据给父组件

<!-- Parent.vue -->
<template>
  <Child @myClick="myClick"/>
</template>

<script>
// @ is an alias to /src
import Child from '@/components/Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  setup() {

    const myClick = (value) => console.log(value)

    return {
      myClick
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <button @click="toParent">click</button>
</template>

<script>
export default {
  name: 'Child',
  setup(props,{emit}) {

    const toParent = () => emit('myClick','come from child')
    
    return {
      toParent
    }
  }
}
</script>

Provide / Inject

当父组件向子孙组件传递数据时可以使用一对provide和inject。

父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。

语法：

provide(name, value)  //property名，property值
 
inject(name, default) //property名，默认值

举例：

<!-- Parent.vue -->
<template>
  <Child />
</template>

<script>
import Child from './Child.vue'
import { provide, reactive, ref, readonly } from 'vue' //导入provide

export default {
  name: 'Parent',
  components: {
    Child
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    const updateLocation = () => {
      location.value = 'South Pole'
    }

    provide('location', readonly(location)) //提供只读property
    provide('geolocation', geolocation) //提供了一个响应式property
    provide('updateLocation', updateLocation)  //提供了一个方法
  }
}
</script>

<!-- Child.vue -->
<template>
  <GrandChild />
</template>

<script>
import GrandChild from './GrandChild.vue'

export default {
  name: 'Child',
  components: {
    GrandChild
  }
}
</script>

<!-- GrandChild.vue -->
<script>
import { inject } from 'vue' //导入inject

export default {
  name: 'GrandChild',
  setup() {
    const userLocation = inject('location', 'The Universe') //注入property
    const userGeolocation = inject('geolocation') //注入property
    const updateUserLocation = inject('updateLocation') //注入方法

    return {
      userLocation,
      userGeolocation,
      updateUserLocation
    }
  }
}
</script>