vue 通过 Prop 向子组件传递数据的实现方法
作者：丁七岁
这篇文章主要介绍了vue 通过 Prop 向子组件传递数据的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
这是一个通过 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子组件传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！