富贵资源网 Design By www.hznty.com
本文实例讲述了vue父子模板传值问题解决方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <one></one> </div> </body> </html>
//引入vue <script src="/UploadFiles/2021-04-02/vue.js"><script> (function(){ //two 的子模板 let three = { props : ["data" , "ide"], methods: { del(i){ this.$emit("del",i) } }, template : `<div><h1>{{data}}</h1><h2>{{ide}}</h2> <span @click="del(ide)">X</span></div>` }; //one 的子模板 let two = { props : ["data" , "ide"], components : { three }, methods:{ dede (i){ this.$emit("del",i) } }, template : `<div> <three @del = "dede" :data = "data.title" :ide = "ide"></three> </div>` }; //父模板 let one = { data(){ return { newsData:[ {title:"新闻一"}, {title:"新闻一"}, {title:"新闻一"}, {title:"新闻一"} ] } }, components : { two }, methods:{ delete2(i){ this.newsData.splice(i,1); } }, template : `<div><h1>one1</h1><two @del = "delete2" :data = "n" ind = "index" v-for="(n,index) in newsData"></two></div>` }; let vm = new Vue({ el : "#app", components : { one } }) })() </script>运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...