微信小程序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>
相关推荐
千寻技术帮6 分钟前
10410_基于Springboot的文化旅游宣传网站
spring boot·后端·vue·源码·旅游·安装·在线旅游
刘一说10 分钟前
Pinia状态持久化的“隐形陷阱“:为什么页面刷新后状态丢失?
前端·javascript·vue.js
那些免费的砖42 分钟前
Uni ECharts - 基于 ECharts 开发的 uni-app 跨端图表解决方案,和 Vue ECharts 用法几乎一致
vue.js·uni-app·echarts
小马_xiaoen1 小时前
Vue3 + TS 实现长按指令 v-longPress:优雅解决移动端/PC端长按交互需求
前端·javascript·vue.js·typescript
乐~~~1 小时前
评估等级页面
javascript·vue.js
qq_316837752 小时前
uniapp打包微信小程序使用插件
微信小程序·小程序·uni-app
我是伪码农2 小时前
Vue 1.29
前端·javascript·vue.js
css趣多多2 小时前
Vue动态组件以及keep-alive的使用
前端·javascript·vue.js
jiayong232 小时前
Vue 3 面试题 - 状态管理与数据流
前端·javascript·vue.js
VX:Fegn089511 小时前
计算机毕业设计|基于ssm + vue超市管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·课程设计