zoukankan      html  css  js  c++  java
  • Vue Prop属性(父to子)

    通过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()
      }
    }
    
  • 相关阅读:
    在DOS的常用命令
    HTML中USEMAP的用法
    asp.net2.0角色管理,详细步骤
    利用ASP.NET动态生成HTML文件
    PetShop 4.0 详解之五(PetShop之业务逻辑层设计)
    使用成员资格和用户登录创建网站 (Visual Studio)
    Windows 找不到文件'(null)'.请确定文件名是否正确后,再试一下.要搜索文件,请单击[开始]按钮,然后单击"搜索"
    在ashx文件中读写session
    asp.net图片滚动+JAVASCRIPT(向右)
    动态编辑程序配置文件
  • 原文地址:https://www.cnblogs.com/guangzan/p/11268930.html
Copyright © 2011-2022 走看看