用Vue里的父子组件实现下拉框

前端

2024-02-07 17:37:04

组件开发分析：既然是组件，首先组件内部数据内容肯定是可变的（如上图中的“按时间排序”之类的），这必须由父组件传入（即父组件如何告诉子组件应该如何展示数据呢？）

那么现在，重点来了，在Vue中，组件之间是如何通信的呢？

Vue父子组件通信：实现父子组件之间的通信，有两种方式：

第一种：父组件向子组件传值：props

父组件向子组件传值，有两种方式：

通过props传递数据
通过$emit事件传递数据

第二种：子组件向父组件传值：$emit

子组件向父组件传值，通常是通过$emit事件来实现的。

现在我们来结合实际例子，通过一个下拉框组件来理解Vue中的父子通讯。

以下是下拉框组件的代码：

<template>
  <select>
    <option v-for="option in options" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  methods: {
    emitChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

这个组件接受一个名为options的props，这是一个数组，里面包含了下拉框选项的数据。

组件还定义了一个名为emitChange的方法，这个方法会在下拉框值发生改变时触发，并将选中的值作为参数传递给父组件。

现在，让我们在父组件中使用这个下拉框组件：

<template>
  <div>
    <dropdown-component :options="options" @change="handleChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log('selected value:', value)
    }
  }
}
</script>