Vue3.0组件之间的传值

Vue3.0 组件之间的传值

      • 在组件step1里面把参数值传过去
      • 在step页面(父页面)里面存起来
      • 在step2页面里面取出来

step1和step2都是step页面的组件
想把step1保存之后返回的id传到step2里面
注意:接收要用与setup同级定义一个props:{}进行接收,然后再把它赋给setup

在组件step1里面把参数值传过去

next(submitForm.id)
先把id传到跳转的事件里面
在保存成功的回调里面:

submitForm.id = res.data.id
next(submitForm.id)

Vue3.0组件之间的传值_第1张图片

先把id传到跳转的事件里面
在保存成功的回调里面:

submitForm.id = res.data.id
next(submitForm.id)

next跳转方法里面

const next = (id) => {
    context.emit("nextBtn",id);
}

在step页面(父页面)里面存起来

Vue3.0组件之间的传值_第2张图片
Vue3.0组件之间的传值_第3张图片
html:

 

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页面里面取出来

Vue3.0组件之间的传值_第4张图片

与setup同级定义一个props进行接收

props: {
        stepId: Number
},

在setup里面:

let stepId = ref("")
 return {
    stepId: props.stepId,
 }

此时这个stepId就是我们要接收的id值
Vue3.0组件之间的传值_第5张图片

你可能感兴趣的:(vue)