面试题：Vue复杂组件中如何利用响应式特性实现数据联动

思路

数据响应式：利用Vue的响应式系统，将购物车数据和当前选中商品的数据定义为响应式数据。
商品列表操作：在商品列表组件中，当用户点击加入购物车按钮时，将该商品信息添加到购物车响应式数据中。
购物车总价计算：通过计算属性，依赖购物车数据，实时计算并显示总价。
商品详情展示：在商品列表点击商品时，将该商品信息传递给商品详情组件进行展示。

关键代码片段

Vue实例基本结构

<template>
  <div>
    <商品列表组件 :商品数据="商品数据" @加入购物车="加入购物车"></商品列表组件>
    <购物车组件 :购物车数据="购物车数据"></购物车组件>
    <商品详情组件 :商品详情="当前选中商品"></商品详情组件>
  </div>
</template>

<script>
import 商品列表组件 from './商品列表组件.vue';
import 购物车组件 from './购物车组件.vue';
import 商品详情组件 from './商品详情组件.vue';

export default {
  components: {
    商品列表组件,
    购物车组件,
    商品详情组件
  },
  data() {
    return {
      商品数据: [],
      购物车数据: [],
      当前选中商品: null
    };
  },
  methods: {
    加入购物车(商品) {
      this.购物车数据.push(商品);
    }
  }
};
</script>

购物车组件计算总价

<template>
  <div>
    <ul>
      <li v - for="(item, index) in 购物车数据" :key="index">{{item.商品名}} - {{item.价格}}</li>
    </ul>
    <p>总价: {{ 总价 }}</p>
  </div>
</template>

<script>
export default {
  props: ['购物车数据'],
  computed: {
    总价() {
      return this.购物车数据.reduce((total, item) => total + item.价格, 0);
    }
  }
};
</script>

商品列表组件添加商品到购物车

<template>
  <div>
    <ul>
      <li v - for="(item, index) in 商品数据" :key="index">
        {{item.商品名}} - {{item.价格}}
        <button @click="加入购物车(item)">加入购物车</button>
        <button @click="展示商品详情(item)">查看详情</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['商品数据'],
  methods: {
    加入购物车(商品) {
      this.$emit('加入购物车', 商品);
    },
    展示商品详情(商品) {
      this.$emit('展示商品详情', 商品);
    }
  }
};
</script>

商品详情组件展示商品信息

<template>
  <div v - if="商品详情">
    <h2>{{商品详情.商品名}}</h2>
    <p>{{商品详情.详细描述}}</p>
  </div>
</template>

<script>
export default {
  props: ['商品详情']
};
</script>

以上代码只是示例结构，实际应用中需要根据具体业务逻辑完善数据结构和功能。

星途面试题库

面试题：Vue复杂组件中如何利用响应式特性实现数据联动

知识考点

面试题答案

思路

关键代码片段