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 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
JS打印组合功能
Aug 04 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python实现三种随机请求头方式
2021/01/05 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
毕业自我鉴定书
2014/03/24 职场文书
说明书怎么写
2014/05/06 职场文书
艺术节开幕词
2015/01/28 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
会计主管岗位职责
2015/04/02 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
话题作文之学会尊重
2019/12/16 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang