Vue.component('model', { props: ['list', 'isactive'], template: `<div class="overlay" v-show="isactive"> <div class="con"> <h4 style="text-align: center">新增 | 修改</h4> <div class="content" > <div style="margin:10px auto;" v-for="(value, key) of modifylist"> <div class="item_name" v-if="key!='uid'&&key!='time'"> <span v-if="key=='id'">编号</span> <span v-else-if="key=='user_name'">用户名</span> <span v-else-if="key=='user_passwd'">密码</span> <span v-else-if="key=='uid'">识别码</span> <span v-else-if="key=='role'">角色</span> <span v-else-if="key=='note'">备注</span> <span v-else-if="key=='time'">时间</span> <span v-else>{{ key }}</span> </div> <input class="item_value" type="text" v-model="modifylist[key]" v-if="key!='uid'&&key!='time'" > <div style="clear: both;"></div> </div> <div style="margin: 20px 30px;"> <input class="item_name" style="font-size: 18px;text-align: center;" type="button" @click="changeActive" value="取消"> <input class="item_value" style="font-size: 18px;text-align: center;" type="button" @click="modify" value="保存"> </div> </div> </div> </div>`, computed: { modifylist() { return JSON.parse(JSON.stringify(this.list)); } }, methods: { changeActive() { this.$emit('change'); }, modify() { this.$emit('modify', this.modifylist); } } });

这是一个 Vue.js 的组件，用于展示一个弹窗，可以用于新增或者修改数据。其中，props 接收两个参数：list 和 isactive，list 是一个对象数组，用于展示数据；isactive 是一个布尔值，用于控制弹窗的显示与隐藏。模板中使用了 v-show 指令控制弹窗的显示与隐藏。computed 属性中定义了一个计算属性 modifylist，用于获取 list 的深拷贝，方便修改数据时不影响原数据。methods 中定义了两个方法：changeActive 和 modify，分别用于关闭弹窗和保存修改后的数据。其中，changeActive 使用了 $emit 方法向父组件传递事件，从而实现关闭弹窗的功能；modify 方法也使用了 $emit 方法向父组件传递修改后的数据。

相关问题

<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>￥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>这是GoodsDetail01，<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>￥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>这是GoodsDetail02，这是<template > <div class="product-wrap" > <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)"> <img :src="product.image" alt="" > <div> <span>{{ product.name }}</span> <h4>￥{{ product.price }}</h4> </div> <component :is="currentComponent"></component> </div> </div> </template>这是goodslist商品主页，实现goodslist点击跳转到GoodsDetail01和GoodsDetail02，请用动态组件实现跳转，写出vue.app和goodslist代码

Vue.app代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

goodslist代码如下：

<template>
  <div>
    <h2>商品列表</h2>
    <div class="product-wrap">
      <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)">
        <img :src="product.image" alt="">
        <div>
          <span>{{ product.name }}</span>
          <h4>￥{{ product.price }}</h4>
        </div>
      </div>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import GoodsDetail01 from "./GoodsDetail01.vue";
import GoodsDetail02 from "./GoodsDetail02.vue";

export default {
  name: "GoodsList",
  components: {
    GoodsDetail01,
    GoodsDetail02,
  },
  data() {
    return {
      products: [
        {
          id: 1,
          name: "商品1",
          price: 100,
          image: "https://via.placeholder.com/150",
        },
        {
          id: 2,
          name: "商品2",
          price: 200,
          image: "https://via.placeholder.com/150",
        },
      ],
      currentComponent: "",
    };
  },
  methods: {
    handleClick(id) {
      if (id === 1) {
        this.currentComponent = "GoodsDetail01";
      } else if (id === 2) {
        this.currentComponent = "GoodsDetail02";
      }
    },
  },
};
</script>

<div class="product-specs"> <h3>规格</h3> <div class="spec-list"> <div v-for="(spec, index) in product.specs" :key="index" :class="{ 'spec-item': true, 'active': product.selectedSpecIndex === index }" @click="selectSpec(index)"> <span class="spec-name">{{ spec.name }}</span> <span class="spec-value">{{ spec.value }}</span> </div> </div>

这段代码是一个 Vue.js 组件，用于渲染产品规格列表。在该组件中，使用了 v-for 指令对规格列表进行遍历，使用 :key 绑定了每个规格的索引，使用 :class 绑定了样式类名，以便根据选中状态添加/移除样式。同时，使用 @click 绑定了选中规格的事件处理程序。在事件处理程序中，会将选中的规格索引更新到组件的数据中，以便在界面中展示当前选择的规格。