企业网站建设公司网络服务,在线wordpress,wordpress 高级,长沙同城1.父传子 defineProps 父组件直接通过属性绑定的方式给子组件绑定数据#xff0c;子组件通过defineProps接收函数接收
其中v-model是完成事件绑定和事件监听的语法糖。v-model算是v-bind和v-on的简洁写法#xff0c;等价于 c-input refinputRef :modelValue…1.父传子 defineProps 父组件直接通过属性绑定的方式给子组件绑定数据子组件通过defineProps接收函数接收
其中v-model是完成事件绑定和事件监听的语法糖。v-model算是v-bind和v-on的简洁写法等价于 c-input refinputRef :modelValueinputValue inputinputValue $event.target.value/c-input 子组件接收 子组件使用props.modelValue
2.子传父 defineEmits
子组件通过defineEmits注册一个自定义事件而后触发emit去调用该自定义事件并传递参数给父组件。
在父组件中调用子组件时通过v-on绑定一个函数通过该函数获取传过来的值。
父组件传值 子组件接收 3.子组件暴漏方法父组件调用 defineExpose
1在父组件中获取在子组件的实例
2在子组件中通过defineExpose暴漏方法
子组件 父组件 4.完整代码
//父
templateh2父组件{{ inputValue }}/h2CInput refinputRef v-model:modelValueinputValue/CInput!-- c-input refinputRef :modelValueinputValue inputinputValue $event.target.value/c-input --button clicksubmitForm提交/buttonspan v-iferrorMessage stylecolor:red{{ errorMessage }}/span
/template
script setup
//在vue3中如何将子组件的方法暴漏
//1.在父组件中获取在子组件的实例
//2.在子组件中通过defineExpose暴漏方法
import { ref } from vue
import CInput from /views/CInput.vueconst 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 typetext :valuemodelValue inputupdateValue//template
script setup
import { defineProps,defineEmits,defineExpose } from vueconst 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
