js如何调用vue方法

在Vue中，我们可以通过以下几种方式来调用Vue方法：

1. 使用Vue实例的方法：在Vue实例中，我们可以通过this关键字来调用Vue实例的方法。例如，在Vue的created钩子函数中，我们可以通过this来调用Vue实例的方法。

```javascript

new Vue({

methods: {

sayHello() {

console.log('Hello!');

}

},

created() {

this.sayHello(); // 调用Vue实例的方法

}

})

```

2. 使用Vue组件的方法：在Vue组件中，我们可以通过this关键字来调用组件的方法。例如，在组件的methods选项中定义了一个方法，我们可以通过this来调用该方法。

```javascript

Vue.component('my-component', {

template: '<div>{{ message }}</div>',

data() {

return {

message: 'Hello!'

}

},

methods: {

sayHello() {

console.log(this.message);

}

},

created() {

this.sayHello(); // 调用组件的方法

}

})

```

3. 使用$emit方法触发事件：在Vue组件中，我们可以使用$emit方法来触发自定义事件，并在父组件中监听该事件。通过$emit方法触发的事件，我们可以在父组件中使用@事件名来监听该事件，并执行相应的方法。

```javascript

Vue.component('child-component', {

template: '<button @click="onClick">Click me!</button>',

methods: {

onClick() {

this.$emit('childClick'); // 触发自定义事件

}

}

})

new Vue({

methods: {

handleChildClick() {

console.log('Child button clicked!');

}

},

template: '<div><child-component @childClick="handleChildClick"></child-component></div>'

})

```

4. 使用$on方法监听事件：在Vue实例或Vue组件中，我们可以使用$on方法来监听自定义事件，并在事件触发时执行相应的方法。

```javascript

new Vue({

created() {

this.$on('myEvent', () => {

console.log('Event triggered!');

})

},

mounted() {

setTimeout(() => {

this.$emit('myEvent'); // 触发自定义事件

}, 1000)

}

})

```