vue 通过Prop向子组件传递数据

Posted 2022-07-17 fei-h

如何使用

第一步父组件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