如何使用
第一步父组件App.vue中
<template> <div id="app"> <Users :users="users"></Users> </div> </template> <script> import Users from ‘./components/Users‘ export default { name: ‘App‘, data: function () { return { users: [ {id:1, name:‘Henry‘}, {id:2, name:‘Tom‘} ] } }, components: { Users } } </script>
解释:把父组件中的data中的users:[ ] 通过v-bind:users = "users"传递给子组件
子组件中
<template> <div id="app"> <span>通过import注册局部组件</span><br> <span>{{users[0].name}}</span> </div> </template> <script> export default { name: ‘users‘, //props:[‘users‘], props: { users: { type: Array, required: true } } } </script>
解释:父组件中传过来的值可以直接使用了<span>{{users[0].name}}</span>
Prop类型
以字符串数组形式列出的 prop:
props: [‘title‘, ‘likes‘, ‘isPublished‘, ‘commentIds‘, ‘author‘]
以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
推荐使用第二种
传递动态或静态prop
给 prop 传入一个静态的值:
<blog-post title="My journey with Vue"></blog-post>
prop 可以通过 v-bind 动态赋值,例如:
<!-- 动态赋予一个变量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 动态赋予一个复杂表达式的值 --> <blog-post v-bind:title="post.title + ‘ by ‘ + post.author.name"></blog-post>
任何类型的值都可以传给一个 prop
单向数据流
父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
这里有两种常见的试图改变一个 prop 的情形:
这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值
props: [‘initialCounter‘], data: function () { return { counter: this.initialCounter } }
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: [‘size‘], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
原文链接:https://www.jianshu.com/p/ac63ad5bdbf6
原文地址:https://www.cnblogs.com/fei-H/p/11362767.html
时间: 2024-10-15 13:39:17