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

1.父传子 defineProps

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


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

<c-input ref="inputRef" :modelValue="inputValue" @input="inputValue = $event.target.value"></c-input>

子组件接收:

子组件使用:props.modelValue

2.子传父 defineEmits

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

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

父组件传值:

子组件接收:

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

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

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

子组件:

父组件:

4.完整代码

复制代码
//父:
<template>
  <h2>父组件:{{ inputValue }}</h2>
  <CInput ref="inputRef"  v-model:modelValue="inputValue"></CInput>
  <!-- <c-input ref="inputRef" :modelValue="inputValue" @input="inputValue = $event.target.value"></c-input> -->
  <button @click="submitForm">提交</button>
  <span v-if="errorMessage" style="color:red">{{ errorMessage }}</span>
</template>
<script setup>
//在vue3中如何将子组件的方法暴漏
//1.在父组件中获取在子组件的实例
//2.在子组件中通过defineExpose暴漏方法
import { ref } from 'vue'
import CInput from '@/views/CInput.vue'

const inputValue = ref('')
const errorMessage = ref('')
const inputRef = ref(null)
const submitForm = () => {
  if(inputRef.value.validate(inputValue.value)){
    errorMessage.value=''
  } else {
    errorMessage.value='输入不能为空'
  }
}
</script>
子:
<template>
  <!-- @input是一个常用的指令,用于监听原生input事件。当输入框的值发生变化时,@input指令绑定的方法会被触发。 -->
  <input 
    type="text" 
    :value="modelValue" 
    @input="updateValue"/>

</template>
<script setup>
import { defineProps,defineEmits,defineExpose } from 'vue'

const props= defineProps({
  modelValue:{
    type:Number
    //require:true
  }
})
const emit = defineEmits(['update:modelValue'])
//const emit = defineEmits([modelValue'])
const updateValue = (event) =>{
  emit('update:modelValue',event.target.value)
}
const validate = (value)=>{
//简单校验规则,输入不能为空
  return value.trim()!==''
}
//暴漏方法
defineExpose({
  validate 
})
</script>
相关推荐
摆烂工程师7 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭8 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码16 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger21 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话22 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时22 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳22 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹24 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子24 分钟前
深入解析 iframe
前端
WEI_Gaot24 分钟前
ES6 模板字符串
前端·javascript