vue 通过 Prop 向子组件传递数据的实现方法


Posted in Javascript onOctober 30, 2020

这是一个通过 Prop 向子组件传递数据的小例子。

vue 通过 Prop 向子组件传递数据的实现方法

代码:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        margin: 0;
        padding: 0;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--数据的渲染-->
      <ul>
        <student-component v-for="item in students" :student="item"></student-component>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>

      //子组件
      //编写学生组件
      Vue.component('student-component',{
        props:['student'], // props 可以是数组或对象,用于接收来自父组件的数据。
        template:`<li>
               <h3>学生的姓名:{{student.name}}</h3>
               <h3>学生的年龄:{{student.age}}</h3>
               <h3>学生的兴趣:{{student.hobbies}}</h3>
               <hr/>
               <br/>
             </li>`

      })


      //父组件
      let app = new Vue({
        el:'#app',
        data:{
          //把这些数据传给子组件 然后渲染到页面上
          students:[
            {
              name:'丁七岁',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            },
            {
              name:'丁七岁2',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            },
            {
              name:'丁七岁3',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            }
            ,{
              name:'丁七岁4',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            }

          ]
        }
      })
    </script>
  </body>
</html>

不再关心dom操作了 专注于数据的渲染。比如这个关注点 就是如何把 students这个数组中的信息渲染到页面上给用户看。

到此这篇关于vue 通过 Prop 向子组件传递数据的实现方法的文章就介绍到这了,更多相关vue Prop子组件传递数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue 注册组件的使用详解
May 05 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
JS实现购物车基本功能
Nov 08 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 #Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 #Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 #Javascript
Javascript文本框脚本实现方法解析
Oct 30 #Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 #Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 #Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 #Javascript
You might like
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python中关于浮点数的冷知识
2019/09/22 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python高级特性简介
2020/08/13 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
护理专业的自荐信
2013/10/22 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
师德师风事迹材料
2014/12/20 职场文书
酒店开业主持词
2015/07/02 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers