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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
详解javascript遍历方式
Nov 11 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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
构建简单的Webmail系统
2006/10/09 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
js实现双色球效果
2020/08/02 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python多分支if语句的使用
2020/09/03 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
快递业务员岗位职责
2014/01/06 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
高一新生军训方案
2014/05/12 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书