vue 兄弟组件传值及方法

前言

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

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

84

查看详情

在 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 组件传值方面的理解和开发实践有所帮助。

以上就是vue 兄弟组件传值及方法的详细内容，更多请关注php中文网其它相关文章！