Vue2.0 父子组件传递函数的教程详解

在Vue2.0中，通过props和$emit等特性，进行组件之间数据的传递和事件的通信变得非常方便。如何在Vue2.0中实现父子组件传递函数呢？本文将详细介绍该过程。

基本思路

父子组件传递函数的基本思路，是将一个函数作为props传递给子组件，在子组件中调用该函数，从而实现子组件的一些交互行为能够改变父组件中的状态或数据。

父组件传递函数给子组件

父组件中需要传递的函数，可以通过props来实现。在父组件中定义一个方法并将其赋值给props即可，示例如下：

<template>
  <div>
    <ChildComponent :handleClick="handleClick"></ChildComponent> // 通过props传递函数
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Parent Component Clicked')
    }
  }
}
</script>

在上面的代码中，ChildComponent是父组件中的子组件，父组件中定义了一个函数handleClick，并将这个函数通过props传递给了子组件。在子组件中，通过props接收这个函数并在需要时进行调用，代码如下：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  props: ['handleClick'], // 组件需要接收的props
  methods: {
    handleClick() {
      this.handleClick() // 调用父组件传递过来的函数
    }
  }
}
</script>

在上面的代码中，ChildComponent组件通过props接收了父组件传递过来的handleClick函数，并在按钮点击时调用了它。

子组件传递函数给父组件

子组件中需要传递函数给父组件时，可以通过$emit来触发自定义事件，在父组件中监听这个事件并执行相应的函数。示例如下：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('handle-click') // 触发自定义事件
    }
  }
}
</script>

在上面的代码中，ChildComponent组件中的按钮点击事件会触发handleClick方法，并通过$emit触发了一个名为handle-click的自定义事件。

在父组件中，使用v-on来监听这个事件，并执行相应的函数，示例如下：

<template>
  <div>
    <ChildComponent @handle-click="handleChildClick"></ChildComponent> // 监听子组件触发的自定义事件
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick() {
      console.log('Child Component Clicked')
    }
  }
}
</script>

在上面的代码中，父组件通过v-on监听了子组件触发的名为handle-click的自定义事件，并将事件的处理方法handleChildClick赋值给了它。当子组件中的按钮点击事件触发了自定义事件时，handleChildClick方法就会执行。

示例1：在TodoList中实现删除功能

在TodoList中，可以通过点击任务项旁边的删除按钮，将该任务项从列表中删除。这个功能可以通过将删除函数传递给子组件ListItem，来实现。

父组件TodoList中的代码：

<template>
  <div>
    <ul>
      <ListItem v-for="(item, index) in list" :key="index" :item="item" :handleDelete="deleteItem"></ListItem> // 通过props传递删除函数
    </ul>
    <input type="text" v-model="newItem" @keyup.enter="addItem"> // 添加任务项的代码
  </div>
</template>

<script>
import ListItem from './ListItem.vue'

export default {
  components: {
    ListItem
  },
  data() {
    return {
      list: ['task a', 'task b', 'task c'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.list.push(this.newItem)
      this.newItem = ''
    },
    deleteItem(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

子组件ListItem中的代码：

<template>
  <li>
    <p>{{ item }}</p>
    <button @click="handleDelete">Delete</button> // 点击删除按钮时调用父组件传递过来的删除函数
  </li>
</template>

<script>
export default {
  props: ['item', 'handleDelete'], // 接收父组件传递过来的删除函数
  methods: {
    handleDelete() {
      const index = this.$parent.list.indexOf(this.item) // 获取待删除的任务项下标
      this.handleDelete(index) // 调用父组件传递过来的删除函数
    }
  }
}
</script>

在上面的代码中，父组件TodoList中定义了一个名为deleteItem的方法，并将这个方法通过props传递给了子组件ListItem。在子组件中，当点击删除按钮时，会触发handleDelete方法，并得到被删除任务项的下标，接着调用父组件传递过来的deleteItem方法，将该任务项从列表中删除。

示例2：在Counter组件中实现计数器

在Counter组件中，可以通过点击加号或减号来改变计数器的值。这个功能可以通过子组件CounterButton将加一或减一的函数传递给父组件Counter，来实现。

父组件Counter中的代码：

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <CounterButton :text="'-' " :handleClick="decreaseCount"></CounterButton> // 通过props传递减一函数
    <CounterButton :text="'+'" :handleClick="increaseCount"></CounterButton> // 通过props传递加一函数
  </div>
</template>

<script>
import CounterButton from './CounterButton.vue'

export default {
  components: {
    CounterButton
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    decreaseCount() {
      this.count -= 1
    },
    increaseCount() {
      this.count += 1
    }
  }
}
</script>

子组件CounterButton中的代码：

<template>
  <button @click="handleClick">{{ text }}</button> // 点击按钮时调用父组件传递过来的函数
</template>

<script>
export default {
  props: ['text', 'handleClick'], // 接收父组件传递过来的函数
  methods: {
    handleClick() {
      this.handleClick() // 调用父组件传递过来的函数
    }
  }
}
</script>

在上面的代码中，父组件Counter中通过props将decreaseCount 和 increaseCount函数分别传递给了子组件CounterButton。在子组件中，当点击减号或加号按钮时，会触发handleClick方法，并调用父组件传递过来的decreaseCount或increaseCount函数，从而改变父组件中计数器的值。

总结

父子组件传递函数是Vue2.0中非常常用的功能之一。通过上面的介绍，我们可以了解到在Vue2.0中实现父子组件传递函数的两种方法：将函数通过props传递给子组件；在子组件中通过$emit发送自定义事件并在父组件中监听这个事件。