Vue component 父子组件通信 props
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div_box :brand="msg1" :colleges="msg2"></div_box> <div id="home"> <span>首页</span> <div_box2 :brand="msg1" :colleges="msg2"></div_box2> </div> <div id="mine"> <span>我的</span> </div> </div> <template id="div_box"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <template id="div_box2"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <template id="div_box3"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <script src="js/vue.3.2.2.js"></script> <script> const Box = { //用于接收数据 props:['brand','colleges'], template:'#div_box' } const Box2 = { //用于接收数据 props: { brand:String, colleges:Array }, template:'#div_box2' } const Box3 = { //用于接收数据 props: { brand:{type:String,required:true,default:"aaaaaaa"}, colleges:{type:Array,required:true} }, template:'#div_box3' } // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg1:'你好!', msg2:['web','java','vue'] } }, components:{ 'div_box':Box, 'div_box2':Box2, 'div_box3':Box3 } }).mount('#app'); </script> </body> </html>
【推荐】FFA 2024大会视频回放:Apache Flink 的过去、现在及未来
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
· Pascal 架构 GPU 在 vllm下的模型推理优化
· WinForm 通用权限框架,简单实用支持二次开发
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· 如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
· 面试官:DNS解析都整不明白,敢说你懂网络?我:嘤嘤嘤!
· Fleck:一个轻量级的C#开源WebSocket服务端库