vue联动实现代码

Vue 联动实现代码示例

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

表单联动（下拉框选择后动态加载内容）

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

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

<script>
export default {
  data() {
    return {
      selectedCountry: null,
      selectedCity: null,
      countries: [
        { id: 1, name: '中国' },
        { id: 2, name: '美国' }
      ],
      cities: []
    }
  },
  methods: {
    loadCities() {
      // 模拟API请求
      const cityData = {
        1: [{ id: 101, name: '北京' }, { id: 102, name: '上海' }],
        2: [{ id: 201, name: '纽约' }, { id: 202, name: '洛杉矶' }]
      }
      this.cities = cityData[this.selectedCountry] || []
      this.selectedCity = null
    }
  }
}
</script>

组件间联动（通过事件总线）

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// ComponentA.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { EventBus } from './eventBus'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A')
    }
  }
}
</script>

// ComponentB.vue
<script>
import { EventBus } from './eventBus'
export default {
  created() {
    EventBus.$on('message', (msg) => {
      console.log('Received:', msg)
    })
  }
}
</script>

使用Vuex实现状态联动

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// ComponentA.vue
<template>
  <button @click="incrementCount">增加</button>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$store.commit('increment')
    }
  }
}
</script>

// ComponentB.vue
<template>
  <div>当前计数: {{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

动态组件联动

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <component :is="currentComponent" :key="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

这些示例涵盖了Vue中实现联动的常见模式，可根据实际需求选择合适的实现方式。表单联动适合数据依赖场景，事件总线适合非父子组件通信，Vuex适合全局状态管理，动态组件适合视图切换场景。