[vue3 element-plus]当事件需要传递多个参数的变化写法

需求背景:

需要完成购物车的单选功能。

单选框使用el-checkbox。

通过el-checkbox我们可以通过默认参数获得是否选择。

const changeSelected = (selected) => {
  console.log(selected)
}


<el-checkbox :model-value="i.selected" @change="changeSelected" />

我们之间就可以拿到checkbox是否check的值

但是因为checkbox是用v-for渲染的,所以我还要知道我拿到了哪个check-box

这时候,我们就要多传一个参数,用于获取哪个check-box

如果我们这样写,会直接覆盖默认参数。

<el-checkbox :model-value="i.selected" @change="changeSelected(i)" />

那怎么写能既保留默认参数,并且传递额外的参数呢?

<el-checkbox
  :model-value="i.selected"
  @change="(selected) => singleSelected(i, selected)"
/>

通过这种写法可以保留默认参数

### 如何在 Vue 3 中使用 Element Plus 的 El-Button 组件并保持类似 Vue 2 的语法风格 为了在 Vue 3 中使用 Element Plus 并采用接近于 Vue 2 的语法,可以遵循特定的方法来设置环境和引入所需的库。 #### 安装依赖包 首先,在项目中安装 Element Plus 和其必要的 peer dependencies。通过 npm 或 yarn 来完成这一步骤[^1]: ```bash npm install element-plus vue@next ``` 或者如果偏好使用 Yarn: ```bash yarn add element-plus @vue/compat ``` #### 设置兼容模式 为了让 Vue 3 支持更像 Vue 2 的选项 API (Options API),而不是组合式 API (Composition API), 可以启用 `@vue/compat` 插件。编辑项目的入口文件(通常是 main.js),加入如下代码片段: ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import ElementPlus from &#39;element-plus&#39;; import &#39;element-plus/lib/theme-chalk/index.css&#39;; // 启用 Vue 2 兼容模式 import * as VueCompat from &#39;@vue/compat&#39; const app = createApp(App) app.use(ElementPlus) .use(VueCompat) .mount(&#39;#app&#39;) ``` #### 使用 El-Button 组件 一旦完成了上述配置工作之后,就可以按照传统方式注册和调用 El-Button 组件了。下面是一个简单的例子展示如何在一个单文件组件(SFC)里这样做[^2]: ```html <template> <div id="example"> <!-- 这里的写法Vue 2 基本一致 --> <el-button type="primary" @click="handleClick">点击这里</el-button> </div> </template> <script> export default { name: &#39;ExampleComponent&#39;, methods: { handleClick() { alert(&#39;按钮被点击!&#39;); } } } </script> <style scoped lang="scss"> /* 如果需要自定义样式 */ #example { margin-top: 50px; } .text { font-size: large; } </style> ``` 此方法允许开发者继续沿用熟悉的 Options API 形式的编码习惯,同时享受由 Vue 3 提供的新特性和性能改进[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林林总肿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值