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

父向子

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

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

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




<span >{{props.name}}span>
// 父组件向子组件传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>
// 在子组件中接收父组件传参的完整写法 props
props: {
    age: { // 参数名为age
      type: Number, // 指定参数的类型,若类型不满足会在控制台警告
      default: 0, // 指定参数的默认值,若没有传此参数则使用此默认值
      required: true, // 参数是否必须,若没有传此参数会在控制台警告
      // 自定义验证,返回false表示验证不通过,会在控制台警告
      validator: function (value) {
        return value >= 0
      }
    }
}

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

<template>
  <div id="app">
    <son ref="son">son>
  div>
template>

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

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

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

子向父

  1. 子向父传参

    this.$emit()
  2. 子组件调用父组件的方法或实例

    this.$parent()

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

兄弟组件

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

你可能感兴趣的:(vue2,vue.js,前端,javascript)