vue组件间传参以及方法调用总结

父向子

1. 父组件向子组件传参 props

// 父组件
//  ---- 向子组件传参，参数名propss
<list :propss="propss"></list>
1
2
3

<script>
export default {
  props: ['propss'] // 属性名的方式接收父组件传参
}
script>




<span >{{props.name}}span>
1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

// 子组件接收父组件的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 在子组件中接收父组件传参的完整写法 props
props: {
    age: { // 参数名为age
      type: Number, // 指定参数的类型，若类型不满足会在控制台警告
      default: 0, // 指定参数的默认值，若没有传此参数则使用此默认值
      required: true, // 参数是否必须，若没有传此参数会在控制台警告
      // 自定义验证，返回false表示验证不通过，会在控制台警告
      validator: function (value) {
        return value >= 0
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

2. 父组件调用子组件方法或实例 this.refs

<template>
  <div id="app">
    <son ref="son">son>
  div>
template>
1
2
3
4
5

使用 ：this.$refs.son.方法名/data值

3. 父组件调用子组件方法或实例 this.$children

#####################################################################

子向父

1. 子向父传参

   this.$emit()

2. 子组件调用父组件的方法或实例

   this.$parent()

#####################################################################

兄弟组件

1. 事件中心eventBus 参考案例
2. 事件中心eventBus 应用案例