如何通过按钮点击将父组件下拉选择值作为Props传递给子组件？

核心思路 #

新增一个专门存储提交后筛选值的响应式状态，点击OK按钮时将当前下拉菜单的选择值同步到该状态，再将这个状态作为Props传递给子组件。这样子组件只会在用户确认（点击按钮）后才触发更新和图表计算，避免实时刷新的问题。

Vue 2 具体实现 #

父组件代码 #

<template>
  <div>
    <!-- 下拉菜单与实时选择值绑定 -->
    <select v-model="name">
      <!-- 自定义下拉选项 -->
    </select>
    <select v-model="email">
      <!-- 自定义下拉选项 -->
    </select>
    <select v-model="date">
      <!-- 自定义下拉选项 -->
    </select>

    <!-- OK按钮触发提交事件 -->
    <button @click="submitFilters">OK</button>

    <!-- 子组件：传递提交后的筛选值 -->
    <ChildComponent 
      :name="submittedFilters.name" 
      :email="submittedFilters.email" 
      :date="submittedFilters.date" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 下拉菜单绑定的实时选择值
      name: '',
      email: '',
      date: '',
      // 存储提交后的筛选值，初始与下拉默认值保持一致
      submittedFilters: {
        name: '',
        email: '',
        date: ''
      }
    }
  },
  methods: {
    submitFilters() {
      // 点击按钮时同步当前选择值到提交状态
      this.submittedFilters = {
        name: this.name,
        email: this.email,
        date: this.date
      }
    }
  }
}
</script>

子组件代码（监听Props更新） #

<script>
export default {
  props: ['name', 'email', 'date'],
  watch: {
    // 监听所有筛选值变化，任一变化就重新生成图表
    name: 'generateChart',
    email: 'generateChart',
    date: 'generateChart'
  },
  methods: {
    generateChart() {
      // 这里编写生成图表的业务逻辑，使用当前的name、email、date
    }
  },
  // 初始化时生成一次图表
  mounted() {
    this.generateChart()
  }
}
</script>

Vue 3 组合式API 具体实现 #

父组件代码 #

<template>
  <div>
    <select v-model="name">
      <!-- 自定义下拉选项 -->
    </select>
    <select v-model="email">
      <!-- 自定义下拉选项 -->
    </select>
    <select v-model="date">
      <!-- 自定义下拉选项 -->
    </select>

    <button @click="submitFilters">OK</button>

    <ChildComponent 
      :name="submittedFilters.name" 
      :email="submittedFilters.email" 
      :date="submittedFilters.date" 
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 下拉菜单绑定的实时选择值
const name = ref('')
const email = ref('')
const date = ref('')

// 存储提交后的筛选值
const submittedFilters = reactive({
  name: '',
  email: '',
  date: ''
})

const submitFilters = () => {
  // 同步当前选择值到提交状态
  submittedFilters.name = name.value
  submittedFilters.email = email.value
  submittedFilters.date = date.value
}
</script>

子组件代码（监听Props更新） #

<script setup>
import { watch, onMounted } from 'vue'

const props = defineProps(['name', 'email', 'date'])

const generateChart = () => {
  // 生成图表的业务逻辑，使用props.name、props.email、props.date
}

// 监听Props变化，触发图表更新（immediate: true 确保初始化时执行一次）
watch([() => props.name, () => props.email, () => props.date], generateChart, { immediate: true })
</script>

简化优化：传递整个筛选对象 #

如果筛选字段较多，可直接传递整个submittedFilters对象，减少Props数量：

• 父组件修改子组件调用：

  <ChildComponent :filters="submittedFilters" />
  

• 子组件定义Props：

  // Vue2
  props: {
    filters: {
      type: Object,
      required: true
    }
  }
  
  // Vue3
  defineProps({
    filters: {
      type: Object,
      required: true
    }
  })
  

之后子组件通过this.filters.name（Vue2）或props.filters.name（Vue3）获取值，监听时直接监听filters对象即可。

内容的提问来源于stack exchange，提问作者WBayoomi