通过Prop向子组件传递数据

第一步父组件中

<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.cnblogs.com/guangzan/p/11268930.html