父组件给子组件传值||重新覆盖值||动态渲染class样子

最新推荐文章于 2024-08-04 10:00:00 发布

xiaoxin6661111

最新推荐文章于 2024-08-04 10:00:00 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/xiaoxin6661111/article/details/128021595

本文探讨了Vue中子组件如何向父组件传递值，使用`$emit`触发自定义事件 `_seldrop`，并展示了父组件如何响应这个事件来更新多个选项的值。此外，还涉及到动态类名的使用，以根据条件渲染样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件给父组件传值：

在子组件方法里面写

this.$emit("seldrop", e);

在父组件里面写：

html里面写

<div
        style="margin-right:15px;"
        :class="this.select == 4 ? 'showBorder' : ''"
      >
        <DropdownBoxA
          :message="options4"
          @seldrop="_seldrop($event, options4, 4)"
          :value="options4.value"
        ></DropdownBoxA>
      </div>

_seldrop(e, opt, ind) {
      // this.options1.value = this.options1.oval
      //重置所有选项
      this.options2.value = this.options2.oval;
      this.options3.value = this.options3.oval;
      this.options4.value = this.options4.oval;

      this.select = ind;
      opt.value = e.label;

每当调用这个方法时候，将他们的value值全部用oval覆盖，然后选择的值label值再覆盖oval的值。

然后是：class，写成动态的渲染样式，如果满足条件就渲染