【Vue】组件之间的方法调用

组件之间的方法调用包括：

• 子组件调用父组件的方法
• 父组件调用子组件的方法
• 无关联组件之间的方法调用

下面来详细学习三种组件之间的方法调用。

子组件调用父组件的方法

子组件调用父组件时需要先访问父组件实例，Vue.js中提供了$parent property 供子组件访问父组件的实例。
$parent是指组件树的根实例，如果组件没有根实例则表示它自己。
通过$parent既可以方法父组件的方法和属性，又可以修改父组件的方法和属性。
用法：
假设父组件中有属性name和方法parentPrint，在子组件中调用如下：

//获取父组件name值
console.log(this.$parent.name);
//修改父组件name值
this.$parent.name ="ssss";
this.$parent.parentPrint();

如果子组件被父组件嵌套调用，子组件如果想要访问最外层的父组件的实例，则需要多个this.$parent.$parent...$parent直到访问到最外层的父组件，这种调用方式容易出现问题，因此不常使用。

父组件调用子组件的方法

在父组件中如果想要访问子组件的实例，可以在父组件中通过ref为子组件创建一个id引用
在父组件中调用子组件：

<base-input ref="usernameInput"></base-input>

调用子组件的方法：

this.$refs.usernameInput.方法();

但是$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

父组件向子组件传递数据
在子组件中通过props定义数据类型，父组件调用子组件时通过v-bind(或:)将数据绑定传递给子组件
子组件修改父组件的属性
子组件修改父组件的属性，可以通过以下更新父组件的属性

this.$emit('update:parentProp',prop)

Vue通过prop进行双向数据绑定。子组件数据变化，一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。
Vue2.3版本引入sync，作为一个事件绑定语法糖，当子组件触发事件时，父组件会响应事件并实现数据更新。
父组件：

 <parent-comp :visible.sync="isShow"></parent-comp>

子组件：

props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 子组件触发函数
    handleClose() {
      this.$emit('update:visible', false)
    },
  }