vue.js 中的边界处理：子访问父与父访问子

2023-12-11 14:44:54

子访问父

子组件访问父组件的方法有很多种，其中最常用的是通过 props 传递数据。props 是父组件向子组件传递数据的单向绑定，子组件只能读取 props 中的数据，但不能修改它们。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

这种方法非常简单，但也有它的缺点。首先，props 是静态的，这意味着一旦父组件将数据传递给子组件，子组件就无法再修改这些数据。其次，props 只能传递简单的数据类型，如字符串、数字和布尔值。如果要传递更复杂的数据结构，如数组或对象，则需要使用其他方法。

除了 props 之外，子组件还可以通过 parent 属性访问父组件。parent 属性指向父组件的实例，子组件可以通过它访问父组件的 data、methods 和 computed 属性。

<template>
  <div>
    <h1>{{ $parent.message }}</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$parent.message)
  }
}
</script>

这种方法比 props 更灵活，因为子组件可以访问父组件的任何数据和方法。但是，这种方法也有它的缺点。首先，$parent 属性是动态的，这意味着如果父组件的数据或方法发生变化，子组件也会受到影响。其次，这种方法可能会导致代码的可读性和可维护性下降，因为子组件和父组件之间的关系变得更加复杂。

父访问子

父组件访问子组件的方法也有很多种，其中最常用的是通过 refs。refs 是父组件向子组件传递引用的一种方式，父组件可以通过 refs 访问子组件的实例。

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

这种方法非常简单，但也有它的缺点。首先，refs 是静态的，这意味着一旦父组件将引用传递给子组件，父组件就无法再修改这个引用。其次，refs 只能传递对子组件实例的引用，父组件不能直接访问子组件的数据和方法。

除了 refs 之外，父组件还可以通过 provide 和 inject 来访问子组件。provide 和 inject 是两个全局 API，父组件可以通过 provide 向子组件提供数据和方法，子组件可以通过 inject 来接收这些数据和方法。

// 父组件
export default {
  provide() {
    return {
      message: 'Hello, world!'
    }
  }
}

// 子组件
export default {
  inject: ['message'],
  template: `<div>{{ message }}</div>`
}