vite2 + Vue3 中 组件传值

父传子

父组件：

<template>
  <div class="son">
    <son1 :toChild="toChild" />
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import son1 from './branch/son1.vue'
export default {
  components: {
    son1
  },
  setup(props,context) {
    const data = reactive({
      toChild: '传递数据1'
    })

    return {
      ...toRefs(data)
    }
  }
}
</script>

子组件

// 第一种-------------------配置setup-------------------
<script>
export default {
  props: {  //这里必须写，不然setup中的props也拿不到
    toChild: {
      type: String,
      default: '无数据'
    }
  },
  setup(props, context) {
    console.log(props.toChild)  //  传递数据1
    return {};
  },
};
</script>

// 第二种------------------setup语法糖--------------------
<script setup>
  const props = defineProps({
    name: {
      type: String,
      default: ''
    }
  })
</script>

 注意：defineProps只能直接暴露在setup下，不能放在回调中。不需要引入，直接调用即可

子传父

 子组件

// 第一种-----------------配置setup---------------------
<script>
import { ref } from "vue";
export default {
  setup(props, context) {
    const { emit } = context
    const msg = ref('999')
    // 子传父
    const send = () => {
      emit('sonSend',msg)
    }
    return {
      msg,
      send
    };
  },
};
</script>

// 第二种-----------------setup语法糖----------------------
<script setup>
  const emit = defineEmits(['sonSend'])
  const btnClick = () => {
    emit('sonSend', '999')
  }
</script>

 注意：defineEmits只能直接暴露在setup下，不能放在回调中。不需要引入，直接调用即可.同defineProps

父组件

<template>
  <div class="son">
    <son1 @sonSend="sonSend" />  //监听子组件的自定义事件
  </div>
</template>
<script>
import son1 from './branch/son1.vue'
export default {
  components: {
    son1
  },
  setup(props,context) {
    const sonSend = (val) => {
      console.log(val.value)  // 999
    }
    return {
      sonSend
    }
  }
}
</script>

兄弟之间传值

vue2 我们通过EventBus   new Vue的方式来实现。Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

1.安装mitt

npm install mitt --save 

2. 新建 bus.js

bus.js 

import mitt from 'mitt'

const bus = mitt()

export default bus

 然后直接引用就可以了

兄弟组件1

<template>
    <button @click="btn">我是兄弟组件b</button>
  </template>
 
  import bus from '@/utils/bus'
  function btn() {
    bus.emit("fromBother", '传给好兄弟'); //参数一为自定义事件名称，参数二是传递的参数
  }
  return{
      btn
  }

 兄弟组件2

import bus from '@/utils/bus'
import { onUnmounted } from "vue"
 
setup(props,context) {
  function fromBother(val) {
    console.log(val,'val--->>>兄弟传过来')
  }
  onMounted(() => {
    bus.on('fromBother',fromBother)   //监听兄弟组件传过来的值
  })
  onUnmounted(() => {  //销毁的时候 解绑
    bus.off('fromBother',fromBother)
  })
  return {}
}