Vue3实现数据子传父

Vue3实现数据子传父

子组件页面

//   html   子组件上需要用到的方法
   <el-dialog v-model="dialogVisible" title="添加课程" top="10vh" 
    width="640px" :before-close="handleClose">
        <ul>
          <li v-for="(item,index) in tableData" :key="item.id">{{ item.name }}
            <el-button type="primary" @click="handleSelect(index)">选择</el-button>
          </li>
        </ul>
    </el-dialog>

  //  js  定义想要传递的数据
const tableData = ref([
  {id:1,name:"小王",avatar:"1.jpg",sign:"xxxxx"},
  {id:2,name:"小勇",avatar:"2.jpg",sign:"zzzzz"}
])
  // 定义事件驱动
const emits = defineEmits(["select"])

// 选择用户   将数据传递出去
const handleSelect = (index)=>{
  emits("select",tableData.value[index])
  handleClose();
}

父组件页面

// html   父组件上使用的子组件
 <user-dialog ref="userRef" @select="handleSelectUser"></user-dialog>

// js
// 获取信息
const handleSelectUser= (selectUser)=>{
 formData.value.userid = selectUser.id
 formData.value.nickname = selectUser.name
 formData.value.avatar = selectUser.avatar
}```