vue父子模板传值问题解决方法案例分析


Posted in Javascript onFebruary 26, 2020

本文实例讲述了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>

运行结果:

vue父子模板传值问题解决方法案例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
JavaScript实现打砖块游戏
Feb 25 #Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 #Javascript
Javascript地址引用代码实例解析
Feb 25 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python的面向对象思想分析
2015/01/14 Python
详解Python中DOM方法的动态性
2015/04/11 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
NumPy 数组使用大全
2019/04/25 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
个人评价范文分享
2014/01/11 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
工作散漫检讨书
2014/09/16 职场文书
会议接待欢迎标语
2014/10/08 职场文书
英语邀请函范文
2015/02/02 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
安全伴我行主题班会
2015/08/13 职场文书
关于运动会的广播稿
2015/08/19 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书