请问vue采用cdn直接在浏览器执行的完整component组件怎么写?还有父子组件之间的传值?
网友回复
使用 Vue.component来声明一个组件,子组件与父组件之间的通讯方式通过props与$emit来实现。
完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <style> .comment-box{ padding: 5px 10px; border: 1px solid grey; margin:5px; } .reply{ color: red; font-weight: bold; } </style> </head> <body> <div id="app"> <div id="comment"> <Reply :commentdata="comments" v-on:replyit="replyit"></Reply> </div> <form><input :placeholder="touser" id="replycontent" /> <input type="hidden" id="toid" :value="toid" /><input type="button" value="回复" /></form> </div> <script type="text/javascript"> Vue.component('Reply',{ template: '<div><div class="comment-box" v-for="item in commentdata"><span>{{item.nickname}}说</span> <span>{{item.content}}</span> <span @click="replyit(item.id,item.nickname)" class="reply">回复</span><Reply v-bind="$attrs" v-on="$listeners" v-if="item.replyComments" :commentdata="item.replyComments" ></Reply></div></div>', props: ['commentdata'], data: function () { return { }; }, mounted: function () { ...
点击查看剩余70%
浏览器中如何实时调用摄像头扫描二维码?
grok4、gemini2.5pro、gpt5、claude4.1到底谁的编程能力更强一些?
python能将2d平面户型图转换成3d三维户型效果图吗?
有没有什么办法将网页的指定dom元素及子元素的所有css导出?
如何避免调用ai大模型api对话的时候用户让他说出自己的系统提示词?
textarea如何实现标签tag式输入和自由文本结合?
如何用js实现两个textarea的文本内容差异化对比同步滚动?
如何用html写出一个调用大模型api实现ai下象棋的游戏?
ai生成软著软件著作权材料的ai提示词怎么写?
如何给网页富文本编辑器增加ai续写、ai润色优化等功能?