您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“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父子模板传值问题如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。