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">。
相关推荐
灰海1 分钟前
原型与原型链到底是什么?
开发语言·前端·javascript·es6·原型模式·原生js
玲小珑2 分钟前
Next.js 教程系列(十四)NextAuth.js 身份认证与授权
前端·next.js
山河木马16 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina18 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者24 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享32 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享33 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海37 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子1 小时前
深入理解TCP协议
前端·javascript·面试
万少1 小时前
鸿蒙外包的十大生存法则
前端·后端·面试