[JavaScript知识库]vue3:emit传参

父子传参

子组件
Child.vue

<template>
  <div>
    <button @click="childEmit">父组件传参</button>
  </div>
</template>
<script>
export default {
    setup(props,{emit}){  
        function childEmit () {
            emit('my-emit', '我是子组件值')
        }
        return{
            childEmit
        }
    }
};
</script> 

父组件
father.vue

<template>
  <div>
    <child @my-emit="parentEmit"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
import { ref } from "vue";
export default {
  components: {
    Child,
  },
  setup() {
    function parentEmit(val){
        // val
    }
    return{
        parentEmit
    }
  },
};
</script> 

案例

搜索：【一级搜索，二级搜索（高级搜索）】

const emit = defineEmits(['heightSearch','firstSearch'])
const searchWord = ref<string>('')
const wordSearch = ()=>{
  //一级搜索
  emit('firstSearch',searchWord.value)
}
const goSearch = ()=>{
  //高级搜索
  showLables.business_scope = form.business_scope
  let contact_str = '',ctype_str = '';
  form.contact.forEach(v=>{
    contact_str += contactArr.value.find(j=>j.value == v)?.name + '，'
  })
  ...
  emit('heightSearch',getSearchParams())

}
  const getSearchParams()= ()=>{
  //返回高级搜索参数
  let searchParams = {}
  let company_type = 0
  // const contact = Number(form.mobile) | Number(form.phone) | Number(form.email)
  let contact = 0
  ...}