vue2中组件间数据传输
子组件
<input type="text":value="modelValue" @input="onInput">
props:{
modelValue: String},
methods:{onInput(e){this.$emit('form-input1', e.target.value)}}
父组件
<ValideInput1 @form-input1="formInput1" v-model="inputValue"/>import ValideInput1from'./components/ValideInput1.vue';data(){
inputValue:''}
methods:{formInput1(val){
console.log(val)}}
setup中
子组件
<template><input type="text":value="modelValue" @input="onInput"></template><script>import{ defineComponent, reactive}from'vue'exportdefaultdefineComponent({
name:'valideInput',
props:{
modelValue:''},
emits:['form-input'],//定义事件名称setup(props, context){//接收props参数,可以拿到其他组件传入进来的数据constonInput=(e)=>{//使用context的emit方法上传对应的值
context.emit('form-input', e.target.value)}return{
onInput}}})</script>
父组件
//@form-input监听,名称与子组件中定义的事件名称相同<ValideInput @form-input="formInput" v-model="inputValue"/>import ValideInputfrom'./components/ValideInput.vue';setup(){const inputValue='1111'constformInput=(val)=>{
console.log(val)}//setup中数据返回出去,可以供其他组件选项使用return{
inputValue, formInput}},