跳出框架，感悟Vue非父子组件之间的通信艺术

1. props

props是Vue.js中父子组件之间通信的常用方式，它允许父组件向子组件传递数据。在父组件中，可以使用props属性来定义要传递的数据，在子组件中，可以使用props来接收这些数据。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, child!'
    }
  }
}
</script>

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

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

2. $emit

emit是Vue.js中子组件向父组件发送数据的常用方式，它允许子组件触发一个事件，父组件可以监听这个事件并作出相应的处理。在子组件中，可以使用emit方法来触发事件，在父组件中，可以使用v-on指令来监听事件。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, parent!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, parent!
    }
  }
}
</script>

3. 自定义事件

除了props和$emit之外，还可以使用自定义事件来实现非父子组件之间的通信。自定义事件需要手动注册和触发，但是它可以实现更灵活的通信方式。

<!-- 父组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$root.$emit('message', 'Hello, world!')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div v-on:message="handleMessage"></div>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

4. 事件总线

事件总线是一种特殊的Vue.js实例，它可以用来在组件之间传递事件。事件总线可以作为中央事件处理中心，组件可以通过事件总线来触发事件和监听事件。

<!-- 父组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$root.$emit('message', 'Hello, world!')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div v-on:message="handleMessage"></div>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

5. provide/inject

provide/inject是Vue.js中一种新的组件通信方式，它允许父组件向其所有子组件提供数据。在父组件中，可以使用provide方法来提供数据，在子组件中，可以使用inject方法来注入这些数据。

<!-- 父组件 -->
<template>
  <child-component></child-component>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, child!'
    }
  }
}
</script>

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

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

以上便是Vue.js中非父子组件之间通信的几种方式，希望能够帮助您更好地理解和使用Vue.js进行开发。