vue3组件传参（子传父、父传子）

子传父

子组件1（Navigator.vue）：

<script setup>

  // 定义一个向父组件App.vue提交数据的事件
  const emits = defineEmits(["sendData"])

  function send(data){
    // 向父组件App.vue提交数据
    emits("sendData",data)
  }

</script>

<template>
  <div>
    <ul>
      <li @click="send('列表项1')">列表项1</li>
      <li @click="send('列表项2')">列表项2</li>
      <li @click="send('列表项3')">列表项3</li>
      <li @click="send('列表项4')">列表项4</li>
      <li @click="send('列表项5')">列表项5</li>
      <li @click="send('列表项6')">列表项6</li>
    </ul>
  </div>
</template>

父组件（App.vue）:

<script setup>

  import Content from './components/Content.vue'
  import Navigator from './components/Navigator.vue'
  import {ref} from 'vue'

  let msg = ref("")

  // 该函数用于接收Navigator.vue子组件传递的参数
  function receiveData(data){
    msg.value = data
  }

</script>

<template>
  <div>
    <!--  @子组件自定义时间名="函数"，用于接收子组件Navigator.vue传递的参数，@sendData与子组件Navigator.vue中defineEmits(["sendData"])定义的sendData对应  -->
    <Navigator @sendData="receiveData" class="navigator"></Navigator>
    <!--  向子组件Content.vue中传递数据，以绑定属性的方式  -->
    <Content :data="msg" class="content"></Content>
  </div>
</template>

父传子

子组件2（Content.vue）：

<script setup>

  // 接收父组件App.vue传递的参数
  let msg = defineProps({
    // 这里的data与父组件App.vue中Content标签内的:data对应
    data:String
  })

</script>

<template>
  <div>
    {{msg.data}}
  </div>
</template>