详解从vue的组件传值着手观察者模式

我会详细讲解从vue的组件传值着手观察者模式的完整攻略。

什么是观察者模式

观察者模式是一种设计模式，常用于在对象之间定义一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都能及时得到通知并更新自己的状态。

在vue中，观察者模式广泛应用于组件之间的传值通信。

vue组件传值

vue组件传值分为父子组件传值和兄弟组件传值两种类型。这里以父子组件传值为例进行说明。

在vue中，父组件可以通过props属性向子组件传递数据，子组件可以通过$emit方法向父组件发送事件。这样就实现了父子组件之间的数据传递。

例如下面的代码演示了一个子组件通过props接收父组件传递的数据：

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

从vue的组件传值着手，理解观察者模式

在vue中，除了上述的props和$emit，还有一种方式可以实现组件之间的通信，那就是通过$on、$off、$emit等方法实现自定义事件。

这种方式就是观察者模式。组件 A 作为 Subject，可以发出自定义事件，其他组件可以作为 Observer，用 $on 方法监听事件，并在事件回调函数中实现自己的逻辑。当事件被 Subject 发出时，所有监听此事件的 Observer 都能接收到此事件的通知并执行事件回调函数。

例如下面的代码演示了一个子组件通过$on方法监听父组件发出的change事件：

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello from child component'
    }
  },
  mounted () {
    this.$parent.$on('change', this.onChange)
  },
  beforeDestroy () {
    this.$parent.$off('change', this.onChange)
  },
  methods: {
    onChange (eventData) {
      this.message = eventData.message
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <button @click="changeMessage">Change Message</button>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      parentMessage: 'Hello from parent component'
    }
  },
  methods: {
    changeMessage () {
      this.parentMessage = 'New message from parent component'
      this.$emit('change', { message: this.parentMessage })
    }
  }
}
</script>

在上述代码中，子组件用$on方法监听了父组件发出的change事件，当事件被发出时，子组件的onChange方法将被调用，从而实现了父子组件之间的通信。