微信小程序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>
相关推荐
老华带你飞5 分钟前
健身房|基于springboot + vue健身房管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
JIngJaneIL10 分钟前
基于Java酒店预约系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
深红12 分钟前
玩转小程序AR-实战篇
前端·微信小程序·webvr
一位搞嵌入式的 genius2 小时前
Vue实例挂载:从原理到项目实践的全维度解析
前端·javascript·vue.js·前端框架
cindershade2 小时前
Vue 3 Keep-Alive 深度实践:从原理到最佳实践
vue.js·vue-router
m0_740043732 小时前
Vue Router中获取路由参数d两种方式:$route.query和$route.params
前端·javascript·vue.js
Shirley~~3 小时前
vite的tersor在lib库模式下不生效问题
javascript·vue.js·ecmascript
小飞侠在吗3 小时前
vue 生命周期
前端·javascript·vue.js
魂祈梦3 小时前
ElementUI组件出现大量重复样式
vue.js·element·scss
cindershade3 小时前
Vue3 + Keep-Alive:实习中遇到的 window 滚动问题与实践
vue.js