vue父子模板传值问题解决方法案例分析
更新时间:2020年02月26日 08:52:55 作者:巴啦啦小能量
这篇文章主要介绍了vue父子模板传值问题解决方法,结合案例形式分析了vue.js父子模板传值问题相关实现方法与具体操作步骤,需要的朋友可以参考下
本文实例讲述了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><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程序设计有所帮助。
相关文章
Vue3路由配置createRouter、createWebHistory、useRouter和useRoute详解
Vue3和Vue2基本差不多,只不过需要将createRouter、createWebHistory从vue-router中引入,再进行使用,下面这篇文章主要给大家介绍了关于Vue3路由配置createRouter、createWebHistory、useRouter和useRoute的相关资料,需要的朋友可以参考下2023-02-02Vue中引入bootstrap.min.css的正确姿势分享
这篇文章主要介绍了Vue中引入bootstrap.min.css的正确姿势,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10element-ui中页面缩放时table表格内容错位的解决
这篇文章主要介绍了element-ui中页面缩放时table表格内容错位的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码,需要的朋友可以参考下2023-10-10
最新评论