vue3的组件通信

一、父传子

1、方式一

父组件传递

<template>
  <h1>这是父组件</h1>
  <Son :name='name'></Son>
</template>

<script setup>
import { ref } from 'vue'
import Son from './Son.vue'
let name = ref('张三')  // 这是传递的数据
</script>

<style scoped>
</style>

子组件接收

<template>
  <div>
    这是Son组件 ==> {{name}}
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  name: {
    type: String,
    default: 'name'
  }
})
</script>

<style scoped>
</style>

2、方式二

子组件接收

setup包含两个参数，可以获取props的值

<script type="text/javascript">
import { toRefs } from 'vue'
export default {
  // 仍然是通过props获取，但是setup中可以接收到这个props，对数据进行二次处理
  props: ['name'],
  setup(props, context) {
    // 得到一个响应式对象，通过toRef或者toRefs将响应式对象的属性单独暴露给外部使用
    let { name } = toRefs(props)
    let newName = '姓名:' + name.value
    return {
      newName
    }
  }
}
</script>

<style scoped>
</style>

二、子传父

vue2中使用的是this.$emit发送事件的方式传递参数

1、方式一

子组件传递

<template>
  <div>
    这是子组件的数据 ==> {{name}}
    <button @click="passName">传递</button>
  </div>
</template>

<script setup>
let name = ref('张三')
let emit = defineEmits(['passName'])
let passName = () => {
  emit('passName', name)
}
</script>

2、方式二

子组件传递

<template>
  <div>
    这是子组件的数据 ==> {{name}}
    <button @click="passName">传递</button>
  </div>
</template>

<script type="text/javascript">
export default {
  // context包括 attrs | emit | expose | solts
  setup(props, context) {
    let name = ref('张三')
    let passName = () => {
      context.emit('fun', name)
    }
    return {
      name,
      passName
    }
  }
}
</script>

父组件接收

<template>
  <h4>这是父组件 {{name}} </h4>
  <Son @passName="passName"></Son>
</template>

<script setup>
import Son from './Son.vue'
let name = ref('待接收')
let passName = e => {
  name.value = e.value
}
</script>

<style scoped>
</style>

三、父子组件双向

父组件

通过v-model向子组件传递的数据是双向的，

<template>
  <h1>这是父组件</h1>
  <input type="text" v-model="num">
  <Son v-model:num='num'></Son>
</template>

<script setup>
import { ref } from 'vue'
import Son from './Son.vue'
let num = ref('1') // 这是传递的数据
</script>

<style scoped>
</style>

<template>
  <div>
    这是Son组件 {{ num }}
    <button @click="add">加1</button>
  </div>
</template>

<script setup>
// 子组件要通过特定的提交方式进行修改 'update:要修改的字段名'
const emit = defineEmits(['update:num'])
const props = defineProps({
  num: {
    type: String,
    default: 'num'
  }
})
const add = () => {
  emit('update:num', '2')
}
</script>

<style scoped>
</style>

四、兄弟组件传值

1、方式一：使用插件

• 下载mitt插件

npm install mitt -S

• 新建plugins/bus.js

import mitt from 'mitt'
export default mitt()

• 发送数据

<template>
  <div>
    这是Son组件 | {{ num }}
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script setup>
import bus from '../utils/bus.js'
let num = ref('1') // 这是传递的数据
// 发送数据
let sendData = () => {
  bus.emit('sendData', num)
}
</script>

<style scoped>
</style>

• 接收数据

<template>
  <div>
    Daughter组件 | {{num}}
  </div>
</template>

<script setup>
import bus from '../utils/bus.js'
let num = ref('')
bus.on('sendData', e => {
  num.value = e.value
})
</script>

<style scoped>
</style>