首页vue2 v-model

vue2 v-model

时间: 2023-08-19 14:09:45 浏览: 104

vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

Vue 自定义组件 v-model 双向绑定、父子组件同步通信的多种写法在 Vue 中，父子组件通信通常是单项的，但是在实际开发中，我们经常需要双向通信。因此，本文将介绍 Vue 自定义组件 v-model 双向绑定、父子组件同步通信的多种写法。方法一：使用 `.sync` 修饰符在父组件中，我们可以使用 `.sync` 修饰符来实现双向绑定。例如： ```html <template> <div> <aa class="abc" :syncTest.sync="test"></aa> {{ '外面的值：' + test }} <button @click="fn">外面改变里面</button> </div> </template> <script> import aa from './test.vue' export default { data() { return { test: '' } }, methods: { fn() { this.test += 1 } }, components: { aa } } </script> ``` 在子组件中，我们可以使用 `$emit` 方法来触发更新父组件的值。例如： ```html <template> <div> <ul> <li>{{ '里面的值：' + snycTest }}</li> <button @click="fn2">里面改变外面</button> </ul> </div> </template> <script> export default { props: { snycTest: '' }, methods: { fn2() { this.$emit('update:snycTest', this.snycTest + 1) } } } </script> ``` 方法二：使用 `v-model` 指令在父组件中，我们可以使用 `v-model` 指令来实现双向绑定。例如： ```html <template> <div> <aa class="abc" v-model="test"></aa> {{ '外面的值：' + test }} <button @click="fn">外面改变里面</button> </div> </template> <script> import aa from './test.vue' export default { data() { return { test: '' } }, methods: { fn() { this.test += 1 } }, components: { aa } } </script> ``` 在子组件中，我们可以使用 `model` 选项来指定子组件的值。例如： ```html <template> <div> <ul> <li>{{ '里面的值：' + msg }}</li> <button @click="fn2">里面改变外面</button> </ul> </div> </template> <script> export default { model: { prop: 'msg', event: 'cc' }, props: { msg: '' }, methods: { fn2() { this.$emit('cc', this.msg + 2) } } } </script> ``` 方法三：使用对象传递在父组件中，我们可以使用对象传递来实现双向绑定。例如： ```html <template> <div> <aa class="abc" :obj="obj"></aa> {{ '外面的值：' + obj.test }} <button @click="fn">外面改变里面</button> </div> </template> <script> import aa from './test.vue' export default { data() { return { obj: { test: '' } } }, methods: { fn() { this.obj.test += 1 } }, components: { aa } } </script> ``` 在子组件中，我们可以使用 `$emit` 方法来触发更新父组件的值。例如： ```html <template> <div> <ul> <li>{{ '里面的值：' + obj.test }}</li> <button @click="fn2">里面改变外面</button> </ul> </div> </template> <script> export default { props: { obj: { type: Object, default: () => ({}) } }, methods: { fn2() { this.$emit('update:obj', { ...this.obj, test: this.obj.test + 1 }) } } } </script> ``` Vue 自定义组件 v-model 双向绑定、父子组件同步通信有多种写法，我们可以根据实际情况选择合适的方法。

Vue.js中的v-model是一个指令，用于在表单输入元素和数据之间创建双向绑定。在Vue 2中，v-model指令可以用于文本输入框、多行文本框、复选框、单选按钮和选择列表。以下是一些示例： 1. 文本输入框： ```html <input v-model="message" type="text"> ``` 2. 多行文本框： ```html <textarea v-model="message"></textarea> ``` 3. 复选框： ```html <input v-model="checked" type="checkbox"> ``` 4. 单选按钮： ```html <input v-model="picked" type="radio" value="a"> <input v-model="picked" type="radio" value="b"> ``` 5. 选择列表： ```html <select v-model="selected"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> ``` 在上述示例中，v-model绑定了Vue实例中的数据，例如`message`、`checked`、`picked`和`selected`。当用户与表单元素交互时，数据将自动更新，反之亦然。需要注意的是，v-model只是语法糖，实际上是根据不同的表单元素类型使用不同的事件和属性来实现双向绑定。如果需要自定义组件的双向绑定行为，可以使用`v-bind`和`v-on`指令分别绑定属性和事件。

阅读全文