vue2执行函数函数
时间: 2023-07-15 08:15:41 浏览: 81
在 Vue2 中执行函数可以有多种方式,下面列举常用的几种:
1. 通过 `v-on` 指令绑定事件,例如:
```html
<button v-on:click="handleClick">点击我</button>
```
在 Vue 实例中定义 `handleClick` 函数:
```javascript
methods: {
handleClick() {
// 执行函数逻辑
}
}
```
2. 直接在模板中调用方法,例如:
```html
<p>{{ getFullName() }}</p>
```
在 Vue 实例中定义 `getFullName` 方法:
```javascript
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
```
3. 通过 `$emit` 方法触发自定义事件并传递参数,例如:
```javascript
methods: {
handleButtonClick() {
this.$emit('button-clicked', 'Hello World!');
}
}
```
在父组件中监听 `button-clicked` 事件并执行相应的函数:
```html
<my-component v-on:button-clicked="handleButtonClicked"></my-component>
```
```javascript
methods: {
handleButtonClicked(message) {
console.log(message); // 输出 "Hello World!"
}
}
```
以上是几种常用的执行函数的方式,根据实际需求选择合适的方式即可。
阅读全文