vue3+ts+vite+setup 父子组件emit无法触发问题

检查一下，是不是像我这样sb写错了

首先，要在父组件中传递参数，使用 v-bind 也就是" : "，而事件使用 v-model 也就是 " @ "来绑定传递，我就是这里使用错了，把事件也用了:来传递，因此无法触发函数。

父组件使用 : 传递数据，使用 @ 传递函数

<template>
    <p>父组件</p>
    <Child :data='data' @toClick='toEmit' />
</template>

<script lang='ts' setup>
    import Child from './Child.vue'
    //父组件定义一个函数，并且传递给子组件，子组件可以触发，然后这里的参数就是子组件传递来的
    const toEmit = (msg:string) => {
        console.log('子组件传递了：', msg)
    }
    const data = 'jjjjkunji'
</script> 

子组件使用 defineProps 接收数据， 用defineEmits 接收函数并且触发

<template>
    <p>子组件, {{ props.data }}</p>
    <button @click='childFunc'>点击</button>
</template>

<script lang='ts' setup>
    import { defineProps, defineEmits, watch, ref } from 'vue';
    const msg = ref('')
    //接收来自父组件传来的信息
    const props = defineProps({
        data: String
    })
    //监听父组件传来的值的变化，响应更新
    watch(()=> props.data, (newVal)=>{
       msg.value = newVal;
    })
    //使用 defineEmits 接收事件，用emit变量保存 
    const emit = defineEmits(['toClick']);
    
    const childFunc = () => {
        console.log('子组件发送参数');
        //触发emit中的事件，第二个往后是事件的参数，会传递回去父组件的函数中
        emit('toClick', '子组件参数1');
    }
</script> 

vue 中父子通信， 非setup写法

在Vue3中，父子组件通信可以通过props和emit两个API来实现。

1. props：父组件通过props向子组件传递数据，子组件通过props接收数据。在子组件中，可以使用props选项来声明接收的属性，例如：

// 父组件
<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2. emit：子组件通过emit事件向父组件发送消息。在子组件中，可以使用 $emit 方法触发一个自定义事件。在父组件中，可以通过在子组件上使用 v-on 监听子组件触发的事件，例如：

// 父组件
<template>
  <child-component v-on:message="handleChildMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message);
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sendMessage">Send message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child');
    }
  }
}
</script>

这样父组件就可以通过监听子组件的message事件，获取子组件发送的消息了。