vue自定义组件双向数据绑定

  • [1、使用v - model指令(推荐方式)](#1、使用v - model指令(推荐方式))
  • [2、手动实现双向绑定(不使用v - model语法糖)](#2、手动实现双向绑定(不使用v - model语法糖))
  • [3、 .sync修饰符](#3、 .sync修饰符)
  • [4、.sync 与 v - model 的比较](#4、.sync 与 v - model 的比较)

1、使用v - model指令(推荐方式)

  • 在 Vue 中,v - model是一个语法糖,它在组件上的使用实际上是自动扩展为特定的属性和事件。

  • 例如,创建一个自定义组件MyInput,它类似于原生的input标签可以实现数据双向绑定。

  • 首先,在组件内部,要通过model选项来定义v - model绑定的属性和对应的事件。

  • 以下是MyInput组件的示例代码:

    <template> </template> <script> export default { name: 'MyInput', props: { value: String }, methods: { updateValue(event) { this.$emit('input', event.target.value); } }, model: { prop: 'value', event: 'input' } }; </script>
  • 然后在父组件中使用MyInput组件并进行双向绑定:

    <template>
    <my - input v - model="message"></my - input>

    Message: {{message}}

    </template> <script> import MyInput from './MyInput.vue'; export default { components: { MyInput }, data() { return { message: 'Hello' }; } }; </script>
  • 在这里,MyInput组件内部通过props接收value属性,这个属性是由父组件通过v - model传递过来的。当input元素的input事件触发时,组件内部通过$emit触发input事件,并将新的值传递给父组件。父组件中的v - model会自动更新绑定的message数据。

2、手动实现双向绑定(不使用v - model语法糖)

  • 还是以一个类似输入框的组件为例。在父组件中,将数据传递给子组件作为属性,同时给子组件传递一个更新数据的方法。

  • 子组件代码如下:

    <template> </template> <script> export default { name: 'CustomInput', props: { inputValue: String }, methods: { handleInput(event) { this.$emit('updateValue', event.target.value); } } }; </script>
  • 父组件代码:

    <template>
    <custom - input :inputValue="parentValue" @updateValue="updateParentValue"></custom - input>

    Parent value: {{parentValue}}

    </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { parentValue: 'Initial value' }; }, methods: { updateParentValue(newValue) { this.parentValue = newValue; } } }; </script>
  • 在这个例子中,父组件将parentValue作为inputValue属性传递给子组件。子组件在input事件触发时,通过$emit触发updateValue事件,并将新的值传递给父组件。父组件监听updateValue事件,调用updateParentValue方法来更新parentValue数据。

3、 .sync修饰符

  1. 基本概念
  • 在 Vue 中,.sync是一个语法糖,主要用于在父子组件之间实现双向数据绑定。它提供了一种简洁的方式来让子组件能够修改父组件中的数据。

  • 例如,我们有一个父组件ParentComponent和一个子组件ChildComponent,父组件中有一个数据属性count,当我们想要子组件能够修改这个count属性时,可以使用.sync修饰符。

  • 父组件代码如下:

    <template>

    Count in Parent: {{count}}

    <child - component :count.sync="count"></child - component>
    </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { count: 0 }; } }; </script>
  • 子组件代码如下:

    <template>
    <button @click="incrementCount">Increment Count in Child</button>
    </template> <script> export default { props: { count: Number }, methods: { incrementCount() { this.$emit('update:count', this.count + 1); } } }; </script>
  1. 工作原理
  • 当使用.sync修饰符时,实际上是一个语法简写。对于<child - component :count.sync="count"></child - component>这样的代码,它等价于<child - component :count="count" @update:count="count = $event"></child - component>。
  • 在子组件内部,当需要修改父组件传递过来的count属性时,通过$emit发送一个update:count事件,并且将新的值作为参数传递出去。父组件接收到这个事件后,就会将count属性更新为新的值,从而实现了双向数据绑定。

4、.sync 与 v - model 的比较

  • 相似点:
    • 它们都可以实现父子组件之间的数据双向绑定。都是一种语法糖,帮助开发者更简洁地实现数据交互。
  • 不同点:
    • v - model主要用于表单元素或者类似表单元素的自定义组件,并且在组件内部默认绑定的属性是value,对应的事件是input(当然可以通过model选项进行修改)。而.sync可以用于更广泛的数据双向绑定场景,只要遵循update:propName这样的事件命名规则就可以。
    • v - model在一个组件上通常只用于一个属性的双向绑定,而.sync可以用于多个属性的双向绑定,例如<component :prop1.sync="data1":prop2.sync="data2">。
相关推荐
袁煦丞28 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆29 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记39 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆39 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360240 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军41 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句43 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜43 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI44 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试