• 父组件向子组件传参


    1、子组件通过属性名的方式接收父组件的传参

    1.1、父组件向子组件传参

    <!--父组件向子组件传参,参数名comments-->
    <list :comments="comments"></list>

    1.2、子组件通过属性名接收父组件的传参

    <script>
    import Item from './Item'
    export default {
      components: {
        Item
      },
      props: ['comments'] // 属性名的方式接收父组件传参
    }
    </script>

    1.3、在子组件中使用从父组件接收过来的传参

    <ul class="list-group">
          <item v-for="(comment, idx) in comments" :key="idx" :comment="comment"></item>
    </ul>

    2、子组件通过属性名和属性类型的方式接收父组件的传参

    2.1、父组件向子组件传参

    <!--父组件向子组件传参,参数名comment-->
    <item v-for="(comment, idx) in comments" :key="idx" :comment="comment"></item>

    2.2、子组件通过属性名和属性类型的方式接收父组件的传参

    <script>
    export default {
      props: {
        comment: Object // 属性名和属性类型的方式接收父组件的参数
      }
    }
    </script>

    2.3、在子组件中使用从父组件接收过来的传参

    <p class="user"><span >{{comment.name}}</span><span>说:</span></p>
    <p class="centence">{{comment.content}}</p>

    3、父组件向子组件传Function类型的参数

    3.1、父组件向子组件传Function类型的参数相关代码

    methods: {
        addComment (comment) {
          // unshift向数组的开始位置插入元素
          this.comments.unshift(comment)
        }
    }
    <!--父组件向子组件传Function类型的参数-->
    <add :addComment="addComment"></add>

    3.2、子组件接收父组件的Function类型传参并使用

    <script>
    export default {
      // 通过属性名或者属性名和属性类型的方式都可以接收Function类型的传参
      // props: ['addComment'],
      props: {
        addComment: Function
      },
      data () {
        return {
          name: null,
          content: null
        }
      },
      methods: {
        addFunc () {
          // 在子组件中调用父组件的Function类型的传参
          this.addComment({name: this.name, content: this.content})
        }
      }
    }
    </script>

    4、子组件接收父组件传参的完整写法

    4.1、父组件向子组件传参代码

    <add @addComment="addComment" :age="age"></add>

    4.2、在子组件中接收父组件传参的完整写法

    props: {
        age: { // 参数名为age
          type: Number, // 指定参数的类型,若类型不满足会在控制台警告
          default: 0, // 指定参数的默认值,若没有传此参数则使用此默认值
          required: true, // 参数是否必须,若没有传此参数会在控制台警告
          // 自定义验证,返回false表示验证不通过,会在控制台警告
          validator: function (value) {
            return value >= 0
          }
        }
    }
  • 相关阅读:
    4/19学习总结
    人月神话读后感8
    4/18学习总结:PullToRefresh
    构建之法阅读笔记03
    构建之法阅读笔记02
    个人总结
    大二下学期课程总结
    学习进度16
    学习进度15
    课堂测试-找英语单词最长链
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12542881.html
Copyright © 2020-2023  润新知