vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
2023-09-14 08:59:32 时间
一,js代码
1,Child.vue
<template> <div style="background: #ffff00;"> <div>这是子组件</div> <div>参数default:{{defaultStr}},参数top:{{topStr}}</div> <div>变量:{{childName}}</div> <button @click="childAlert">子组件alert</button><br/> <button @click="sendFatherData">子组件向父组件发送数据</button><br/><br/> </div> </template> <script> import {ref} from 'vue'; export default { name: "ChildComp", props:['default','top'], //属性,用来接收参数 setup(props,{emit}) { //本身的一个方法,响应点击 const childAlert = () => { alert('这是子组件中的alert'); } //接收到父组件调用时的参数 const defaultStr = ref(props.default); const topStr = ref(props.top); //定义变量 const childName = ref('红孩儿'); //向父组件发送数据 const sendFatherData = () => { emit('eventMsg','寻找牛魔王'); } return { childAlert, defaultStr, topStr, childName, sendFatherData, } } } </script> <style scoped> </style>
2,Father.vue
<template> <div> <div>这是父组件</div> <child ref="child" default="cn" top="jp,us,uk" @eventMsg="childCall"></child> <button @click="callChildMethod">父组件调用子组件的方法</button><br/> <button @click="callChildData">父组件访问子组件的数据</button> </div> </template> <script> import {ref} from 'vue' import Child from './Child.vue' export default { name: "FatherComp", components:{ Child, }, setup() { // 获取子组件 const child = ref(null) //调用子组件中的方法 const callChildMethod = () => { child.value.childAlert(); } //访问子组件中的数据 const callChildData = () => { alert("子组件中的变量:childName:"+child.value.childName); } //接收子组件发送的数据 const childCall = (childData) => { alert("子组件传过来的参数:"+childData); } return { callChildMethod, callChildData, child, childCall, } } } </script> <style scoped> </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
三,查看vue框架的版本:
liuhongdi@lhdpc:/data/vue/child$ npm list vue child@0.1.0 /data/vue/child ├─┬ @vue/cli-plugin-babel@5.0.6 │ └─┬ @vue/babel-preset-app@5.0.6 │ └── vue@3.2.37 deduped └─┬ vue@3.2.37 └─┬ @vue/server-renderer@3.2.37 └── vue@3.2.37 deduped
相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
- Vue_(组件)实例方法
- Vue_(基础)Vue中的指令
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- vue页面切换时,页面中的方法执行的顺序踩的坑
- vue-cli的webpack模板项目配置文件分析
- Vue splice方法使用
- vue-resourse简单使用方法
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- Vue splice方法使用
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- vue+php接口
- Vue+Spring boot前后端响应流程总结
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vuejs里:style和:class的区别(vue动态操作绑定class 和 style的方法)
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- Vue Router路由变化router-view视图不刷新
- 计算机毕设项目 40个高质量SSM+VUE毕设项目分享【源码+论文】(八)
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
- vue 获取 DOM 元素的方法
- Vue实战狗尾草博客后台管理系统第七章
- 187:vue+openlayers 轨迹动画,走过后轨道呈现不同颜色
- 135:vue+openlayers添加海量点,使用WebGLPoints方法(示例代码)
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue + springboot备忘录后端
- Vue: vue-router路由