https://github.com/hublot-io/definemodel

defineModel implementation for vue 2.7 according to 3.4 usage
https://github.com/hublot-io/definemodel

macros vue

Last synced: about 10 hours ago
JSON representation

defineModel implementation for vue 2.7 according to 3.4 usage

• Host: GitHub
• URL: https://github.com/hublot-io/definemodel
• Owner: hublot-io
• License: mit
• Created: 2024-07-25T12:49:04.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T15:56:57.000Z (1 day ago)
• Last Synced: 2024-09-27T17:43:16.363Z (about 10 hours ago)
• Topics: macros, vue
• Language: TypeScript
• Homepage:
• Size: 26.4 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# defineModel

defineModel implementation for vue 2.7 according to 3.4 usage

### Installation 

```

yarn add @hublot-io/define-model

```

### Usage

#### Component with single v-model 

When your component only needs to expose a single v-model, you can use it as in Vue 3.4.

`parent.vue`

```vue

    

      

        


        
Classic Model : {{ classic  }}




    

  

  

  


      import { ref } from 'vue';

      import HelloWorld from './components/HelloWorld.vue';

      const classic = ref()

  

```

You only need to add the import of defineModel in the child for it to be found. When you migrate to Vue 3.4, you will simply need to remove the import.

`children.vue `

```vue

  


    

  


import { defineModel } from '@hublot-io/define-model'

const classic = defineModel<string>()

```

#### Component with multiple v-model 

As in Vue 3.4, you have the possibility to add multiple v-models on a component. However, since Vue 2 does not allow arguments on the model directive, you will need to use a custom directive: v-models.

Additionally, you will need to bind the refs of your v-models so that the library can access and modify them.

`parent.vue`

```vue

    

      

        


        
Multiple Model  : {{ multi }}




        
Other  : {{ other }}




    

  

  

  

      import { ref } from 'vue';

      import { bindModels } from '@hublot-io/define-model'

      import HelloWorld from './components/HelloWorld.vue';


      const classic = ref()

      const multi = ref('test')

      const other = ref()

      bindModels({ multi, other })

  

  

```

In the child component, you can use defineModel in the same way as in Vue 3.4.

`children.vue`

```vue

  


    

    

  


import { defineModel } from '@hublot-io/define-model'

const multi = defineModel("multi")

const other = defineModel("other")

```