$listeners在vue3中使用

vue2中使用$attrs从父组件传递数据给子组件嵌套组件，父组件通过通过$listeners监听子组件的事件vue3把把$attrs和$listeners统一合并到$attrs中代码示例：File组件，最内层嵌套组件<template><div class="file-wrapper"@click.stop="clickFile":class="checked?'check-i

qq_41068783

12363人浏览 · 2021-06-29 09:30:54

qq_41068783 · 2021-06-29 09:30:54 发布

vue2中使用$attrs从父组件传递数据给子组件嵌套组件，父组件通过通过$listeners监听子组件的事件
vue3把把$attrs和$listeners统一合并到$attrs中
代码示例：
File组件，最内层嵌套组件


<template>
  <div class="file-wrapper" 
     @click.stop="clickFile" 
     :class="checked?'check-item':''" 
     @mouseover="showCheckFunction" 
     @mouseleave="hideCheckFuntion">
      <div class="inner">
        <img src="../../images/folder.svg" alt="">
        <div  class="file-name">
          Center 模型一号Center 模型一号Center 模型一号Center 模型一号Center 模型一号Center 模型一号
        </div>
      </div>
      <a-checkbox class="check-box" v-if="checked||showCheck" v-model:checked="checked"></a-checkbox>
  </div>
</template>

<script lang='ts'>
import {defineComponent,ref} from 'vue'
import {fileTypeMixin} from '../utils/index'
// 选择框逻辑
const checkBoxShowFunction=()=>{
  const showCheck=ref(false)
  const checked=ref(false)

  const showCheckFunction=()=>{
    showCheck.value=true
  }
  // 隐藏选择框
  const hideCheckFuntion=()=>{
    if(!checked.value){
      showCheck.value=false
    }
  }
  return {
    showCheck,
    checked,
    showCheckFunction,
    hideCheckFuntion
  }
}
export default defineComponent({
  mixins:[fileTypeMixin],
  props:{//接收上层父组件传递过来的数据
    "msg":string
  },
  setup(props,{emit}){
    // 显示和隐藏选择框的逻辑
    const {showCheck,showCheckFunction,hideCheckFuntion,checked}=checkBoxShowFunction()
    // 点击文件逻辑
    const clickFile=()=>{
      checked.value=!checked.value
      emit('clickFile')//传递给上层父组件监听的事件名称
    }
    return {
      showCheck,
      checked,
      showCheckFunction,
      hideCheckFuntion,
      clickFile
    }
  }
})

fileList中间组件

<template>
  <div class="file-list-wrapper">
    <File v-for="(item,index) in new Array(100)" :key="index" v-bind="$attrs"></File>
    //vue3通过v-bind绑定父组件传递的数据或者子组件触发的事件
    //<File v-for="(item,index) in new Array(100)" :key="index" v-bind="$attrs" v-on="$listeners"></File>
    //vue2用法，$attrs接收父组件传递的数据，$listeners接收子组件的事件
  </div>
</template>

<script lang='ts'>
import {defineComponent} from 'vue'
import File from './File.vue'
export default defineComponent({
  components:{
    File
  }
})
</script>

最外层父组件

<template>
   <div class="conent-list">
       <file-list @clickFile='clickFile'></file-list>//clickFile为最内层子组件传递的事件名称
     </div>
</template>
<script lang='ts'>
import {defineComponent,ref} from 'vue'
import FileList from '../components/FileList.vue'
// 点击文件展示
const rightShowFunction=()=>{
  const clickFile=()=>{
    console.log('clickFile')
  }
  return {
    clickFile
  }
}

export default defineComponent({
  components:{
    FileList
  },
  setup(){
     // 显示右侧详情的逻辑
  const {clickFile}=rightShowFunction()
    return {
     searchVal,
     onSearch,
     clickFile
    }
  }
})
</script>