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 操作符实例代码
Oct 24 Javascript
js的写法基础分析
Jan 17 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
node.js实现登录注册页面
Apr 08 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
js实现数字跳动到指定数字
Aug 25 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
星际实力自我测试
2020/03/04 星际争霸
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript 一些用法小结
2009/09/11 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
React Native 环境搭建的教程
2017/08/19 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
js实现简单页面全屏
2019/09/17 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python实现人机五子棋
2020/03/25 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
水电工岗位职责
2014/02/12 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Kubernetes控制节点的部署
2022/04/01 Servers