• vue3父子组件传值,子组件暴漏方法


    1.父传子 defineProps


    父组件直接通过属性绑定的方式给子组件绑定数据,子组件通过defineProps接收函数接收


    其中v-model是完成事件绑定和事件监听的语法糖。v-model算是v-bindv-on的简洁写法,等价于

    子组件接收:

    子组件使用:props.modelValue


    2.子传父 defineEmits

    子组件通过defineEmits注册一个自定义事件,而后触发emit去调用该自定义事件,并传递参数给父组件。

    在父组件中调用子组件时,通过v-on绑定一个函数,通过该函数获取传过来的值。

    父组件传值:


    子组件接收:

    3.子组件暴漏方法,父组件调用 defineExpose

    (1)在父组件中获取在子组件的实例

    (2)在子组件中通过defineExpose暴漏方法

    子组件:


    父组件:

    4.完整代码
     

    1. //父:
    2. <template>
    3. <h2>父组件:{{ inputValue }}</h2>
    4. <CInput ref="inputRef" v-model:modelValue="inputValue"></CInput>
    5. <!-- <c-input ref="inputRef" :modelValue="inputValue" @input="inputValue = $event.target.value"></c-input> -->
    6. <button @click="submitForm">提交</button>
    7. <span v-if="errorMessage" style="color:red">{{ errorMessage }}</span>
    8. </template>
    9. <script setup>
    10. //在vue3中如何将子组件的方法暴漏
    11. //1.在父组件中获取在子组件的实例
    12. //2.在子组件中通过defineExpose暴漏方法
    13. import { ref } from 'vue'
    14. import CInput from '@/views/CInput.vue'
    15. const inputValue = ref('')
    16. const errorMessage = ref('')
    17. const inputRef = ref(null)
    18. const submitForm = () => {
    19. if(inputRef.value.validate(inputValue.value)){
    20. errorMessage.value=''
    21. } else {
    22. errorMessage.value='输入不能为空'
    23. }
    24. }
    25. </script>
    26. 子:
    27. <template>
    28. <!-- @input是一个常用的指令,用于监听原生input事件。当输入框的值发生变化时,@input指令绑定的方法会被触发。 -->
    29. <input
    30. type="text"
    31. :value="modelValue"
    32. @input="updateValue"/>
    33. </template>
    34. <script setup>
    35. import { defineProps,defineEmits,defineExpose } from 'vue'
    36. const props= defineProps({
    37. modelValue:{
    38. type:Number
    39. //require:true
    40. }
    41. })
    42. const emit = defineEmits(['update:modelValue'])
    43. //const emit = defineEmits([modelValue'])
    44. const updateValue = (event) =>{
    45. emit('update:modelValue',event.target.value)
    46. }
    47. const validate = (value)=>{
    48. //简单校验规则,输入不能为空
    49. return value.trim()!==''
    50. }
    51. //暴漏方法
    52. defineExpose({
    53. validate
    54. })

  • 相关阅读:
    计算AUC的方法以及代码实现
    imu绘制运动轨迹
    Python实现---南邮离散数学实验三:盖住关系的求取及格的判定
    java计算机毕业设计景区在线购票系统源码+mysql数据库+系统+lw文档+部署
    Python网络爬虫中这七个li标签下面的属性值,不是固定的,怎样才能拿到他们的值呢?...
    【数学建模暑期培训】线性回归模型
    逆向学习汇编篇:数据的存储与读取
    解决vue 跳转相同路由携带不同参数,页面不渲染问题
    OPENSSL-PKCS7入门知识介绍
    有趣网站推荐-Rainymood
  • 原文地址:https://blog.csdn.net/weixin_40992252/article/details/143385136