el-select的change事件传自定义参数来更改其它组件的值

2024-01-01 20:51:10

自定义参数：在Vue.js中更改子组件和不同组件的值

在Vue.js开发中，使用自定义参数传递数据是实现复杂交互式应用程序的关键。本文将深入探讨如何使用自定义参数在子组件和不同组件中更改值，展示其强大功能和实际应用。

1. 子组件中的值更改

自定义参数可以轻松地用于修改子组件中的值。让我们通过一个示例来理解它：

// ParentComponent.vue
<template>
  <el-select v-model="selected" @change="changeHandler">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
  </el-select>
  <ChildComponent :custom-param="selected" />
</template>

<script>
export default {
  data() {
    return {
      selected: 'A',
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    };
  },
  methods: {
    changeHandler(value) {
      this.$refs.childComponent.changeValue(value);
    }
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <p>当前值：{{ customParam }}</p>
    <button @click="changeValue('D')">更改为 D</button>
  </div>
</template>

<script>
export default {
  props: ['customParam'],
  methods: {
    changeValue(newValue) {
      this.$emit('custom-param', newValue);
    }
  }
};
</script>

在这个示例中，ParentComponent包含一个el-select组件，它发出一个自定义事件changeHandler。当一个选项被选择时，changeHandler()方法被调用，并通过$refs.childComponent.changeValue()方法将所选值传递给ChildComponent。

ChildComponent使用props接收customParam值，并通过@custom-param事件向ParentComponent发出更新的值。这样，ChildComponent中customParam的值可以动态地根据ParentComponent中el-select组件的选中项进行更改。

2. 不同组件的值更改

自定义参数还可以用于修改不同组件中的值。想象一下一个表格组件，当用户选择一行时，你想在另一个组件中显示该行的详细信息。

// TableComponent.vue
<template>
  <el-table :data="tableData" @selection-change="selectionChangeHandler">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Bob', age: 40 }
      ],
      selectedRowData: null
    };
  },
  methods: {
    selectionChangeHandler(selectedRows) {
      this.$emit('selected-row-data', selectedRows[0]);
    }
  }
};
</script>

// DetailComponent.vue
<template>
  <div v-if="selectedRowData">
    <p>Name: {{ selectedRowData.name }}</p>
    <p>Age: {{ selectedRowData.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRowData: null
    };
  },
  mounted() {
    this.$on('selected-row-data', (data) => {
      this.selectedRowData = data;
    });
  }
};
</script>