Vue3.0 组件之间的传值
step1和step2都是step页面的组件
想把step1保存之后返回的id传到step2里面
注意:接收要用与setup同级定义一个props:{}进行接收,然后再把它赋给setup
在组件step1里面把参数值传过去
next(submitForm.id)
先把id传到跳转的事件里面
在保存成功的回调里面:
submitForm.id = res.data.id
next(submitForm.id)
先把id传到跳转的事件里面
在保存成功的回调里面:
submitForm.id = res.data.id
next(submitForm.id)
next跳转方法里面
const next = (id) => {
context.emit("nextBtn",id);
}
在step页面(父页面)里面存起来
html:
<div class="steps-content">
<oneStep @nextBtn="nextBtn" v-if="current === 0"></oneStep>
</div>
<div class="steps-content" v-if="current === 1">
<twoStep @nextTwo="nextTwo" :stepId="stepId" @lastTwo="lastTwo"></twoStep>
</div>
JS:
let stepId = ref("")
const nextBtn = (id) => {
console.log(id)
stepId.value = id
console.log(stepId.value)
current.value = 1;
}
const nextTwo = () => {
current.value = 2;
}
第一个组件触发nextBtn,跳转到第二个组件
在step里面,
在html里面先:stepId="stepId"把组件传的值接收过来
把从step1里面传进来的id给存放到stepId里面
在step2页面里面取出来
与setup同级定义一个props进行接收
props: {
stepId: Number
},
在setup里面:
let stepId = ref("")
return {
stepId: props.stepId,
}
此时这个stepId就是我们要接收的id值