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 相关文章推荐
js DOM 元素ID就是全局变量
Sep 20 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
js同时按下两个方向键
2007/12/01 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python smallseg分词用法实例分析
2015/05/28 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python实现Linux中的du命令
2017/06/12 Python
Python编写一个闹钟功能
2017/07/11 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python使用贪婪算法解决问题
2019/10/22 Python
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
毕业生自我推荐
2013/11/04 职场文书
优秀教师事迹简介
2014/02/02 职场文书
教师产假请假条范文
2014/04/10 职场文书