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

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门

这篇文章主要介绍了vue 通过 Prop 向子组件传递数据的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

这是一个通过 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子组件传递数据内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！

上一篇：解决Vue keep-alive 调用 $destory() 页面不再被缓存的下一篇：微信小程序：报错(in promise) MiniProgramError

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

金源码搜索

金源码导航

免费网站源码

网站模板下载

网站建设

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

编程语言

金源码搜索

金源码导航

免费网站源码

网站模板下载

网站建设