vue 监听和重写组件方法

vue 监听和重写组件方法
在Vue中，你可以使用`watch`选项来监听数据的变化，并在数据变化时执行相应的操作。

同时，你也可以通过`methods`选项定义组件的方法，并在需要时重写这些方法。

下面是一个简单的示例，演示如何在Vue中监听数据变化并重写组件方法：
```html
<template>
<div>
<p>{{ message }}</p>
<button click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
},
watch: {
message(newVal, oldVal) {
('Message changed from ' + oldVal + ' to ' + newVal); }
},
methods: {
changeMessage() {
= 'Message changed!';
},
myMethod() {
('This is my custom method!');
}
}
};
</script>
```
在上面的示例中，我们使用`watch`选项来监听`message`数据的变化。

当
`message`数据发生变化时，会执行`watch`中的回调函数，并打印出旧值和新值。

在`methods`选项中，我们定义了两个方法：`changeMessage`和
`myMethod`。

你可以在组件的模板中通过事件监听器调用这些方法，例如在上面的示例中，我们使用`click`事件监听器来调用`changeMessage`方法。

如果你想重写这些方法，可以在父组件中定义同名的方法，并在子组件中使用它们。

例如：
```html
<template>
<child-component myMethod="parentMethod"></child-component>
</template>
<script>
import ChildComponent from './';
export default {
components: { ChildComponent },
methods: {
parentMethod() {
('This is the parent method!');
}
}
};
</script>
```
在上面的示例中，我们在父组件中定义了一个名为`parentMethod`的方法，并在子组件中使用`myMethod="parentMethod"`来调用它。

这样就可以
重写子组件中的`myMethod`方法。