vue联动实现代码

Vue 联动实现代码

Vue 中实现联动效果通常涉及父子组件通信、状态管理或动态数据绑定。以下是几种常见的联动实现方式：

父子组件通信实现联动

通过 props 和 $emit 实现父子组件数据联动：

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <Child :selected="selectedItem" @update="handleUpdate" />
    <p>当前选择：{{ selectedItem }}</p>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      selectedItem: ''
    }
  },
  methods: {
    handleUpdate(value) {
      this.selectedItem = value
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <select v-model="internalValue" @change="onChange">
    <option value="A">选项A</option>
    <option value="B">选项B</option>
  </select>
</template>

<script>
export default {
  props: ['selected'],
  data() {
    return {
      internalValue: this.selected
    }
  },
  watch: {
    selected(newVal) {
      this.internalValue = newVal
    }
  },
  methods: {
    onChange() {
      this.$emit('update', this.internalValue)
    }
  }
}
</script>

使用 Vuex 实现全局状态联动

当多个组件需要共享联动状态时，可以使用 Vuex：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentSelection: null
  },
  mutations: {
    setSelection(state, payload) {
      state.currentSelection = payload
    }
  }
})

<!-- 组件A -->
<template>
  <select v-model="selection" @change="updateSelection">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['currentSelection']),
    selection: {
      get() {
        return this.currentSelection
      },
      set(value) {
        this.setSelection(value)
      }
    }
  },
  methods: {
    ...mapMutations(['setSelection']),
    updateSelection() {
      this.setSelection(this.selection)
    }
  }
}
</script>

动态表单联动实现

实现表单字段间的动态联动：

<template>
  <div>
    <select v-model="form.type">
      <option value="student">学生</option>
      <option value="teacher">教师</option>
    </select>

    <div v-if="form.type === 'student'">
      <input v-model="form.studentId" placeholder="学号">
    </div>

    <div v-else-if="form.type === 'teacher'">
      <input v-model="form.teacherId" placeholder="工号">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: '',
        studentId: '',
        teacherId: ''
      }
    }
  }
}
</script>

多级下拉菜单联动

实现省市区三级联动效果：

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCities">
      <option v-for="p in provinces" :value="p.id" :key="p.id">
        {{ p.name }}
      </option>
    </select>

    <select v-model="selectedCity" @change="loadDistricts" :disabled="!selectedProvince">
      <option v-for="c in cities" :value="c.id" :key="c.id">
        {{ c.name }}
      </option>
    </select>

    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option v-for="d in districts" :value="d.id" :key="d.id">
        {{ d.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null
    }
  },
  mounted() {
    this.loadProvinces()
  },
  methods: {
    loadProvinces() {
      // 模拟API请求
      this.provinces = [
        { id: 1, name: '广东省' },
        { id: 2, name: '浙江省' }
      ]
    },
    loadCities() {
      if (!this.selectedProvince) return
      // 模拟根据省份加载城市
      this.cities = [
        { id: 101, name: '广州市' },
        { id: 102, name: '深圳市' }
      ]
      this.selectedCity = null
      this.districts = []
    },
    loadDistricts() {
      if (!this.selectedCity) return
      // 模拟根据城市加载区县
      this.districts = [
        { id: 1001, name: '天河区' },
        { id: 1002, name: '越秀区' }
      ]
    }
  }
}
</script>

这些示例展示了 Vue 中实现联动的不同场景和方法，可以根据具体需求选择合适的实现方式。