父组件向子组件传参

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
      }
    }
}