Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Discussion] 事件绑定时是否需要支持在模板中直接书写多段 JavaScript 语句 #46

Open
ChrisCindy opened this issue Apr 14, 2022 · 3 comments

Comments

@ChrisCindy
Copy link
Contributor

ChrisCindy commented Apr 14, 2022

示例:

<template>
  <div @click="{{console.log('123');count = count + 1;}}"></div>
</template>

方案一:SFC 模板中禁止该语法

  1. 运行时模板中使用模板字符串形式绑定,而 ${} 占位符中仅允许书写 JavaScript 表达式而非语句。为保证运行时模板和 SFC 模板尽量一致,建议 SFC 模板中也不支持该种写法;
  2. 用户有该需求时,可以在模板中使用箭头函数绑定:
<template>
  <div @click="{{() => { console.log('123');count = count + 1; }}}"></div>
</template>

或者绑定方法,将逻辑写在方法内:

<template>
  <div @click="{{ handleClick }}"></div>
</template>
function handleClick() {
  console.log('123');
  count = count + 1;
}

方案二:仅 SFC 模板支持,文档中强调此为语法糖

@ChrisCindy ChrisCindy changed the title [Discussion] 事件绑定时是否需要支持在模板中直接书写 JavaScript 语句 [Discussion] 事件绑定时是否需要支持在模板中直接书写多段 JavaScript 语句 Apr 14, 2022
@cryzzchen
Copy link

cryzzchen commented Apr 14, 2022

方案一,SFC 不支持这种语法,需要用户自行包裹箭头函数

@SoloJiang
Copy link
Contributor

支持方案一,做好报错提示就好 =。=

@ChrisCindy
Copy link
Contributor Author

Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants