vue中的vonchange（vue中的component组件用法）

v-on:change 是 Vue.js 中的一个指令，用于监听表单元素的变化，并在变化发生时执行相应的处理函数。

在 Vue.js 中，数据驱动是核心思想之一。v-on:change 指令可以将表单元素的变化与 Vue 实例中的数据绑定起来，当表单元素的值发生变化时，Vue 实例中绑定的数据也会随之改变。这样，我们就可以实时获取表单元素的值，并对其进行处理。

v-on:change 指令的用法很简单，只需要在需要监听变化的表单元素上添加 v-on:change 属性，并指定一个处理函数即可。处理函数可以是 Vue 实例中的方法，也可以是定义在 Vue 实例外部的函数。当表单元素的值发生变化时，v-on:change 指令会自动调用指定的处理函数，并将表单元素的值作为参数传递给处理函数。

v-on:change 指令可以应用于各种表单元素，包括文本框、复选框、单选框、下拉框等。对于文本框和文本域，v-on:change 指令会在输入框失去焦点或按下回车键时触发；对于复选框和单选框，v-on:change 指令会在选中状态发生变化时触发；对于下拉框，v-on:change 指令会在选择项发生变化时触发。

下面是一个使用 v-on:change 指令的例子：

```html

<template>

<div>

<input type="text" v-model="text" v-on:change="handleChange">

<p>{{ text }}</p >

</div>

</template>

<script>

export default {

data() {

return {

text: ''

}

},

methods: {

handleChange(event) {

this.text = event.target.value;

}

}

}

</script>

```

在上面的例子中，我们在一个文本框上使用了 v-on:change 指令，并指定了一个名为 handleChange 的处理函数。当文本框的值发生变化时，handleChange 函数会被调用，并将文本框的值作为参数传递给它。在 handleChange函数中，我们将文本框的值赋给了 Vue 实例中的 data 属性 text。然后，在模板中使用了双花括号语法将 text 的值显示在了一个段落中。

这样，当我们在文本框中输入文字时，handleChange 函数会被调用，并将文本框的值赋给 text 属性。然后，Vue.js 会自动更新模板中的数据，并将新的值显示在段落中。

v-on:change 指令只能监听表单元素的变化，而无法监听非表单元素的变化。如果需要监听非表单元素的变化，可以使用其他指令，例如 v-on:click、v-on:input 等。