vue中 组件间的传值的理解？（父子，子父及非父子的传值）

在 Vue 中，组件间的传值可以通过 `props`、`$emit`、`$parent`、`$children`、`$attrs`、`$listeners` 等方式进行。

1. 父子组件之间的传值：

父组件可以通过 `props` 向子组件传递数据，子组件可以通过 `$emit` 触发事件向父组件传递数据。

例如，父组件向子组件传递一个名字：

<template>
  <div>
    <child-component :name="name" @change-name="changeName"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      name: 'Vue'
    }
  },
  methods: {
    changeName (newName) {
      this.name = newName
    }
  }
}
</script>

子组件接收父组件传递的数据，并通过 `$emit` 触发事件向父组件传递数据：

<template>
  <div>
    <p>父组件传递的名字：{{ name }}</p>
    <button @click="changeName">修改名字</button>
  </div>
</template>
<script>
export default {
  props: {
    name: String
  },
  methods: {
    changeName () {
      this.$emit('change-name', 'Vue.js')
    }
  }
}
</script>

2. 子父组件之间的传值：

子组件可以通过 `$parent` 访问父组件的数据和方法，并通过 `$emit` 触发事件向父组件传递数据。

例如，子组件向父组件传递一个消息：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage () {
      this.$parent.showMessage('Hello, Vue.js')
    }
  }
}
</script>

父组件接收子组件传递的数据，并展示消息：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    showMessage (message) {
      this.message = message
    }
  }
}
</script>

3. 非父子组件之间的传值：

非父子组件之间的传值可以通过一个空的 Vue 实例作为中央事件总线（Event Bus）来实现。

首先，创建一个空的 Vue 实例：

// EventBus.js
import Vue from 'vue'
export default new Vue()

然后，在需要传递数据的组件中，通过 `import` 引入 EventBus，并使用 `$emit` 触发事件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
import EventBus from './EventBus'
export default {
  methods: {
    sendMessage () {
      EventBus.$emit('message', 'Hello, Vue.js')
    }
  }
}
</script>

最后，在接收数据的组件中，也通过 `import` 引入 EventBus，并使用 `$on` 监听事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import EventBus from './EventBus'
export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    EventBus.$on('message', (message) => {
      this.message = message
    })
  }
}
</script>

这样，就可以实现非父子组件之间的传值了。