Value transfer and methods of vue sibling components

前言

Vue 是一个非常流行的前端框架，它提供了很多方便的方法和 API，使得我们在开发过程中可以更加灵活和高效。其中，组件是 Vue 最为重要的概念之一，也是我们在实际开发中最为常用的部分。在组件中，兄弟组件之间的传值和方法调用是一个经常涉及到的问题。那么，本文将会介绍一些 Vue 中兄弟组件传值和方法调用的方法和技巧。

一、props / $emit

在 Vue 中，父组件向子组件传值，我们可以通过 props 的方式进行传递。而子组件向父组件传值，则可以通过 $emit 方法进行传递。那么在兄弟组件之间，我们可以通过这两种方式实现传值。具体实现方法如下：

1.1 props

通过 props 传值，需要在父组件中通过 v-bind 绑定属性，并且在子组件中通过 props 接收父组件传递的值。代码如下：

<script><br> import child from './child.vue'<br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data () { return { msg: 'Hello World!' } }, components: { child }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">props: ['message']</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

在上面的代码中，父组件中通过 v-bind 绑定属性 message 并传递给子组件。子组件通过 props 接收 message，并且在模板中显示出来。

1.2 $emit

通过 $emit 传值，需要在子组件中通过 $emit 方法触发父组件的事件，并且将数值传递给父组件。在父组件中，需要通过 v-on 绑定事件，并且在事件处理函数中接收子组件传递的数值。代码如下：

<script><br> import child from './child.vue'<br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data () { return { data: '' } }, components: { child }, methods: { handleEvent (msg) { this.data = msg } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">methods: { sendMsg () { this.$emit('my-event', 'Hello World!') } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

在上面的代码中，子组件中通过 $emit 方法触发名称为 my-event 的事件，并将数值 'Hello World!' 传递给父组件。父组件中通过 v-on 绑定事件 my-event，并且将事件处理函数指定为 handleEvent。在这个事件处理函数中，我们将传递的数值赋值给了父组件的 data 属性。

二、$parent / $children

在 Vue 组件中，可以使用 $parent 和 $children 访问当前组件的父组件和子组件。通过这两个属性，我们可以在兄弟组件之间实现数据和方法的传递。具体实现方法如下：

2.1 $parent

通过 $parent 属性可以访问到当前组件的父组件。在父组件中，我们可以将需要传递的数据或者方法挂载在其实例上，并且在子组件中通过 $parent 访问到这些数据或方法。代码如下：

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data () { return { message: 'Hello World!' } }, methods: { showMessage () { console.log(this.message) } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">methods: { handleClick () { this.$parent.showMessage() } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

在上面的代码中，父组件通过 data 定义了一个 message 数据，同时也定义了一个 showMessage 方法。在子组件中，通过 $parent 访问到父组件中的 showMessage 方法，并在点击按钮时进行调用。

2.2 $children

通过 $children 属性可以访问到当前组件的子组件。同样的，在子组件中，我们可以将需要传递的数据或方法挂载在其实例上，并且在父组件中通过 $children 访问到这些数据或方法。代码如下：

<script><br> import child from './child.vue'<br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">components: { child }, methods: { callChild () { this.$children[0].showMessage() } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">methods: { showMessage () { console.log('Hello World!') } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br></script>

在上面的代码中，子组件通过定义 showMessage 方法，并将其挂载在实例上。在父组件中，通过 $children 访问到子组件实例，并调用其 showMessage 方法。

结论

通过本文的介绍，我们了解了 Vue 中兄弟组件传值和方法调用的几种方法。在实际开发中，在选择使用哪种方法时，需要根据场景和需求灵活应用。希望本文可以对大家在 Vue 组件传值方面的理解和开发实践有所帮助。

The above is the detailed content of Value transfer and methods of vue sibling components. For more information, please follow other related articles on the PHP Chinese website!