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 Function对象扩展之延时执行函数
Jul 06 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
javascript基础知识
Jun 07 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
简单了解JavaScript arguement原理及作用
May 28 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实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python for循环生成列表的实例
2018/06/15 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
提高python代码运行效率的一些建议
2020/09/29 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
农业项目投资意向书
2015/05/09 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
详细介绍python操作RabbitMq
2022/04/12 Python