这篇文章主要讲解了“Vue父子模板传值问题如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue父子模板传值问题如何解决”吧！具体代码如下：<!DOCTYPE html
这篇文章主要讲解了“Vue父子模板传值问题如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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="https://cdn.bootCSS.com/vue/2.6.4/vue.js"></script><script> (function(){ //two 的子模板 let three = { props : ["data" , "ide"], methods: { del(i){ this.$emit("del",i) } }, template : `<div><h2>{{data}}</h2><h3>{{ide}}</h3> <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><h2>one1</h2><two @del = "delete2" :data = "n" ind = "index" v-for="(n,index) in newsData"></two></div>` }; let vm = new Vue({ el : "#app", components : { one } }) })()</script>Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
感谢各位的阅读，以上就是“vue父子模板传值问题如何解决”的内容了，经过本文的学习后，相信大家对vue父子模板传值问题如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: vue父子模板传值问题如何解决
本文链接: https://www.lsjlt.com/news/345830.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0