微信小程序vue3父组件调用vue2子组件传多个参数方法

vue3父组件调用vue2子组件传参数

1. vue3父组件

javascript 复制代码
<template>
  <div>
    <child :message="message" />
    <button @click="test">添加车牌号</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue'; // 确保路径正确
  const id = ref(0);
  const message = ref('');
    
  const test = () => {
        id.value = 1;
		message.value = "皮卡";
	};
</script>

2. vue2子组件`

javascript 复制代码
<template>
 <div>{{ message }}</div>
</template>

<script>
export default {
 props: ['id','message'],
 	data() {
   		return {
   			message: ''
   			}
   		},
            
   mounted() {
   			this.message = this.$props.message;	
   		
   	}
   	}
</script>
相关推荐
宿6742 小时前
vue3-async
前端·javascript·vue.js
Dreams°1238 小时前
【Java后端+Vue前后端分离:内网正常、公网访问异常|5个高频经典踩坑完整复盘】
java·开发语言·vue.js
小蒜学长8 小时前
基于Springboot+Vue的环保行动志愿者招募系统设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
天道kabuto9 小时前
踩坑复盘:为什么在输入框按个回车,页面就偷偷刷新了?
vue.js
数字游民95279 小时前
史诗级更新:微信小程序支持个人主体接入虚拟支付
ai·微信小程序·小程序·opc·数字游民9527
吴长建先生9 小时前
Vue.js支付回调页面如何设计才能保障对账准确性?
vue.js
leoZ23110 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
吴长建先生10 小时前
支付回调接口设计与代码规范:如何提升团队工程化能力
vue.js
zttbee11 小时前
vue2的API大白话讲解
前端·vue.js·前端框架
卤蛋fg613 小时前
vue 抽屉组件挂载到指定元素内显示,,表格自适应弹窗宽高
vue.js