vue3组件通信defineProps、defineEmits、defineExpose

哆O啦O梦

已于 2024-01-12 14:04:27 修改

阅读量433

点赞数 6

文章标签： vue 前端前端框架

于 2024-01-12 13:46:46 首次发布

本文链接：https://blog.csdn.net/m0_60424565/article/details/135546781

版权

前言

vue最大的特点就是组件化开发，那么在组件开发时必定会用到父子传值，在vue2中我们用到了props、emit、ref、vuex、插槽等等获取组件的数据，那么vue3中必定要认识一下这三兄弟：defineProps、defineEmits、defineExpose（这里我用的是setup语法糖）。

父组件：

//-----------------------------------------------------------------------父组件
<template>
  <div>
    <!-- 内容 -->
    <level :list = list ref="levelw" @fatherData ="fatherDataClick"></level>
    <div>
      <button @click="btn">++</button>
    </div>
  </div>
</template>


<script setup lang="ts">
import { reactive,ref} from 'vue'

const levelw:any = ref(null)
const btn = () => {
  console.log(levelw.value.arrList.age);   //通过ref获取父组件的数据(需要defineExpose暴露一下)
}
const fatherDataClick = (v:Object) => {
  console.log(v);  //接收父组件事件传值
  
}


</script>

子组件：


//--------------------------------------------------------------------子组件
<template>
    
        <div>
          <span>{{ props.list.name }}</span>
          <button @click="emitsBtn">oooo</button>
        </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive,toRefs,toRef,defineProps,defineEmits,defineExpose} from 'vue'

// 父传子
const props:any = defineProps({
  list:Object
})

// 子传父-----------------------自定义事件传值

const arrList:any = reactive({
    age: 18,
  number: 11, 
    hobby:"draw"
})
const emits = defineEmits(['fatherData'])
const emitsBtn = () => {
  emits('fatherData', arrList)
  console.log("dd");
  
}
// 子组件传值的数据需要暴露出去
defineExpose({
  arrList
})
</script >