vue组件传值

传变量：

父组件内

<VanSteps :stepCount="stepNum" :list="stepArr" :isShowDesc="true"></VanSteps>

/** 步骤length */
const stepNum = ref(0)
/** 步骤数据 */
const stepArr = ref([])

子组件内

 <Steps direction="vertical" :active="stepCount" active-color="#FF1A00">
      <Step v-for="(item, index) in list" :key="index">
        <div v-if="isShowDesc" class="text" v-html="item.exchange_content_info">       </div>
      </Step>
</Steps>

defineProps({
  list: {
    required: true
  },
  /** 是否有描述 */
  isShowDesc: {
    type: Boolean,
    default: false
  },
  /** 步骤 */
  stepCount: {
    type: Number,
    default: 0
  }
})

子组件向父组件传方法：

子组件内
<h3 @click="openCallService">{{ item.exchange_content }}</h3>

const emits = defineEmits(['openCallService'])
// 将openCallService通过emits传到父组件
const openCallService = () => {
  emits('openCallService')
}

父组件内

<VanSteps @openCallService="openCallService"></VanSteps>

// 直接调用子组件传递的方法
const openCallService = () => {
  if (exchange_result.value !== 1) {
  /** 充值失败 联系客服 */
    window.location.href = 'tel://' + formOptions.value.goods_detail_info.phone
  }
}

以上就是简单的组件传值，若有不正确的还请多多指教！😉