前言
Vue 是一个非常流行的前端框架，它提供了很多方便的方法和 API，使得我们在开发过程中可以更加灵活和高效。其中，组件是 Vue 最为重要的概念之一，也是我们在实际开发中最为常用的部分。在组件中，兄弟组件之间的传值和方法调用是一个经常涉及到的问题。那么，本文将会介绍一些 Vue 中兄弟组件传值和方法调用的方法和技巧。
一、props / $emit
在 Vue 中，父组件向子组件传值，我们可以通过 props 的方式进行传递。而子组件向父组件传值，则可以通过 $emit 方法进行传递。那么在兄弟组件之间，我们可以通过这两种方式实现传值。具体实现方法如下：
1.1 props
立即学习“前端免费学习笔记（深入）”；
通过 props 传值，需要在父组件中通过 v-bind 绑定属性，并且在子组件中通过 props 接收父组件传递的值。代码如下：
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1> <child :message="msg"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
msg: 'Hello World!'
}
},
components: {
child
}}
</script>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2>
<p>{{ message }}</p></div>
</template>
<script>
export default {
props: ['message']
}
</script>
在上面的代码中，父组件中通过 v-bind 绑定属性 message 并传递给子组件。子组件通过 props 接收 message，并且在模板中显示出来。
1.2 $emit
通过 $emit 传值，需要在子组件中通过 $emit 方法触发父组件的事件，并且将数值传递给父组件。在父组件中，需要通过 v-on 绑定事件，并且在事件处理函数中接收子组件传递的数值。代码如下：
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1>
<child @my-event="handleEvent"></child>
<p>{{ data }}</p></div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
data: ''
}
},
components: {
child
},
methods: {
handleEvent (msg) {
this.data = msg
}
}}
</script>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2> <button @click="sendMsg">向父组件传递数据</button>
</div>
</template>
<script>
export default {
methods: {
sendMsg () {
this.$emit('my-event', 'Hello World!')
}
}}
</script>
在上面的代码中，子组件中通过 $emit 方法触发名称为 my-event 的事件，并将数值 'Hello World!' 传递给父组件。父组件中通过 v-on 绑定事件 my-event，并且将事件处理函数指定为 handleEvent。在这个事件处理函数中，我们将传递的数值赋值给了父组件的 data 属性。
二、$parent / $children
在 Vue 组件中，可以使用 $parent 和 $children 访问当前组件的父组件和子组件。通过这两个属性，我们可以在兄弟组件之间实现数据和方法的传递。具体实现方法如下：
2.1 $parent
通过 $parent 属性可以访问到当前组件的父组件。在父组件中，我们可以将需要传递的数据或者方法挂载在其实例上，并且在子组件中通过 $parent 访问到这些数据或方法。代码如下：
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1> <child></child>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World!'
}
},
methods: {
showMessage () {
console.log(this.message)
}
}}
</script>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2> <button @click="handleClick">调用父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$parent.showMessage()
}
}}
</script>
在上面的代码中，父组件通过 data 定义了一个 message 数据，同时也定义了一个 showMessage 方法。在子组件中，通过 $parent 访问到父组件中的 showMessage 方法，并在点击按钮时进行调用。
2.2 $children
通过 $children 属性可以访问到当前组件的子组件。同样的，在子组件中，我们可以将需要传递的数据或方法挂载在其实例上，并且在父组件中通过 $children 访问到这些数据或方法。代码如下：
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1> <button @click="callChild">调用子组件方法</button>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
},
methods: {
callChild () {
this.$children[0].showMessage()
}
}}
</script>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2>
</div>
</template>
<script>
export default {
methods: {
showMessage () {
console.log('Hello World!')
}
}}
</script>
在上面的代码中，子组件通过定义 showMessage 方法，并将其挂载在实例上。在父组件中，通过 $children 访问到子组件实例，并调用其 showMessage 方法。
结论
通过本文的介绍，我们了解了 Vue 中兄弟组件传值和方法调用的几种方法。在实际开发中，在选择使用哪种方法时，需要根据场景和需求灵活应用。希望本文可以对大家在 Vue 组件传值方面的理解和开发实践有所帮助。
