0

我想用Vite vanilla建立一个非常基本的项目

我用脚手架搭建了这个项目yarn create @vitejs/app

现在我调整了以下文件：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Chat</h1>
        Message
      <br/>
      <textarea placeholder="Message"></textarea>
      <button onclick="sendMessage()">Send</button>
    </div>
  </body>
</html>

样式.css


h1 {
  color: blue;
}

main.js

console.log('hello main.js')

const chatInput = document.querySelector('textarea')

export function sendMessage() {
    let message =  chatInput.value
    window.alert(message)
    chatInput.value = "";
}

当我单击“发送”按钮时，我现在在浏览器控制台中收到以下错误

client.ts:13 [vite] connecting...
main.js:35 hello main.js
client.ts:43 [vite] connected.
(index):18 Uncaught ReferenceError: sendMessage is not defined
    at HTMLButtonElement.onclick ((index):18)

解决方法

我可以通过向按钮添加事件侦听器而不是直接在 HTML 中添加 onclick 来解决此问题

const sendButton = document.querySelector('button')
sendButton.addEventListener('click', sendMessage)

但是为什么不能onclick="sendMessage()"在 HTML 中使用第一种方法呢？

4

1 回答 1

1

Main.js添加为type=module. 模块创建一个范围以避免名称冲突。

您可以将函数公开给window对象

import { sendMessage } from './events.js'
window.sendMessage = sendMEssage

或者使用该addEventListener方法来绑定处理程序，就像你正在做的那样。

于 2021-05-13T12:30:36.773 回答