这是一个通过 Prop 向子组件传递数据的小例子。 代码： !DOCTYPE htmlhtml 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" !--数
这是一个通过 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子组件传递数据内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！