acacha/gist:dd893315c060cb25b5c9efd2b568dbe1

## gistfile1.txt
# ADVANCED VUE COMPONENTS

Exemples: inheritance, compositions, associations:

- https://www.visual-paradigm.com/guide/uml-unified-modeling-language/uml-aggregation-vs-composition/
- https://www.thoughtworks.com/insights/blog/composition-vs-inheritance-how-choose
- https://learn.adamwathan.com/advanced-vue/extending-components-using-composition
  - ModalDialog -> Composició es pot crear ConfirmModalDialog, Announcementdialog
## COMPOSITIONS VS INHERITANCE

Composition over inheritance (or composite reuse principle) in object-oriented programming (OOP) is the principle that classes should achieve polymorphic behavior and code reuse by their composition (by containing instances of other classes that implement the desired functionality) rather than inheritance from a base or parent class. This is an often-stated principle of OOP, such as in the influential book Design Patterns. https://en.wikipedia.org/wiki/Composition_over_inheritance

Què és composició?
- Crear un nou component mitjançant altres components:
  - Es pot fer amb components natius HTML: custom-input -> input
  - Es pot fer amb components de tercers: app-custom-input -> v-input (Vuetify)
  - Amb components propis person: combinació components head hand leg
- Especialització: herència i la composició són exemples d'especialització

Composició VS Herència:
- Herència exemple Vehicle -> Cotxe Cotxe és una especialització de vehicle
- Composition: permet fer el mateix però sense herència. Avantatges:
  - Un component pot ser especialització de múltiples components fent així una herència múltiple

Tenir en compte:
- Herència vs composició en "plantillas" HTML/nativescript: component custom-input que especialitza un input HTML
- Herència composició de codi
  -

## MIXINS/ Traits
- Forma de compartir codi entre components
- Helpers import/Export també és un altre forma: funcions comunes, habituals

## SLOTS

### APLICACIó

- Slots per defecte i named:
  - Importància per la composition (vs inheritance)
  - Tenim la opció de fer components fills d'altres components?
    - Nivell de plantilla utilitzem la composició/especialització
    - Per exemple un component és fill d'un altre en el moment que la plantilla de component utilitza
      - En certa manera els components smart són specialitzacions dels components dummy ja que afegeixen/especialitzen el component amb una connexió al backend
  - Útil per a customitzar plantilles de components

### TEÒRIA
Index
- Default slot
- Named slots
- Scoped slots

## CONTROLLED COMPONENTS I V-MODEL (TWO WAY MODEL BINDING)

### Com portar-ho a la pràctica

- Utilitzar v-model:
  - Qualsvol input file de formulari
- Custom v-model
  - Toogle canal llegit o no llegit
  - Input field search: moixonet quan busquem un canal

### TEÒRIA

Index
- Explicació del two way model binding vs one way:
- API components Vue Props down, event up
- SYNTAX SUGAR V-MODEL:
- Configuració
- Que fer quan hi ha més d'un v-model en component?:
  - SYNTAX SUGAR modificador sync https://es.vuejs.org/v2/guide/components-custom-events.html#Modificador-sync

  Recursos:
  - PROPS DOWN EVENT UP: data:image/png;base64,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

  SYNTAX SUGAR:

  ```
  v-model=”syncedProp” <=> :value=”syncedProp” @input=”syncedProp = arguments[0]”
  :value=”syncedProp” @input=”syncedProp = $event.target.value”
  ```

  Exemple configuració v-model:


 ```
 export default {
  model: {
    prop: "toggled",
    event: "toggle"
  },
  props: ["toggled"],
  methods: {
    toggle() {
      this.$emit("toggle", !this.toggled)
    }
  }
}
```

# RECURSOS

- https://learn.adamwathan.com/advanced-vue/building-controlled-components
-
	# ADVANCED VUE COMPONENTS

	Exemples: inheritance, compositions, associations:

	- https://www.visual-paradigm.com/guide/uml-unified-modeling-language/uml-aggregation-vs-composition/
	- https://www.thoughtworks.com/insights/blog/composition-vs-inheritance-how-choose
	- https://learn.adamwathan.com/advanced-vue/extending-components-using-composition
	- ModalDialog -> Composició es pot crear ConfirmModalDialog, Announcementdialog
	## COMPOSITIONS VS INHERITANCE

	Composition over inheritance (or composite reuse principle) in object-oriented programming (OOP) is the principle that classes should achieve polymorphic behavior and code reuse by their composition (by containing instances of other classes that implement the desired functionality) rather than inheritance from a base or parent class. This is an often-stated principle of OOP, such as in the influential book Design Patterns. https://en.wikipedia.org/wiki/Composition_over_inheritance

	Què és composició?
	- Crear un nou component mitjançant altres components:
	- Es pot fer amb components natius HTML: custom-input -> input
	- Es pot fer amb components de tercers: app-custom-input -> v-input (Vuetify)
	- Amb components propis person: combinació components head hand leg
	- Especialització: herència i la composició són exemples d'especialització

	Composició VS Herència:
	- Herència exemple Vehicle -> Cotxe Cotxe és una especialització de vehicle
	- Composition: permet fer el mateix però sense herència. Avantatges:
	- Un component pot ser especialització de múltiples components fent així una herència múltiple

	Tenir en compte:
	- Herència vs composició en "plantillas" HTML/nativescript: component custom-input que especialitza un input HTML
	- Herència composició de codi
	-

	## MIXINS/ Traits
	- Forma de compartir codi entre components
	- Helpers import/Export també és un altre forma: funcions comunes, habituals

	## SLOTS

	### APLICACIó

	- Slots per defecte i named:
	- Importància per la composition (vs inheritance)
	- Tenim la opció de fer components fills d'altres components?
	- Nivell de plantilla utilitzem la composició/especialització
	- Per exemple un component és fill d'un altre en el moment que la plantilla de component utilitza
	- En certa manera els components smart són specialitzacions dels components dummy ja que afegeixen/especialitzen el component amb una connexió al backend
	- Útil per a customitzar plantilles de components

	### TEÒRIA
	Index
	- Default slot
	- Named slots
	- Scoped slots

	## CONTROLLED COMPONENTS I V-MODEL (TWO WAY MODEL BINDING)

	### Com portar-ho a la pràctica

	- Utilitzar v-model:
	- Qualsvol input file de formulari
	- Custom v-model
	- Toogle canal llegit o no llegit
	- Input field search: moixonet quan busquem un canal

	### TEÒRIA

	Index
	- Explicació del two way model binding vs one way:
	- API components Vue Props down, event up
	- SYNTAX SUGAR V-MODEL:
	- Configuració
	- Que fer quan hi ha més d'un v-model en component?:
	- SYNTAX SUGAR modificador sync https://es.vuejs.org/v2/guide/components-custom-events.html#Modificador-sync

	Recursos:
	- PROPS DOWN EVENT UP: data:image/png;base64,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

	SYNTAX SUGAR:

	```
	v-model=”syncedProp” <=> :value=”syncedProp” @input=”syncedProp = arguments[0]”
	:value=”syncedProp” @input=”syncedProp = $event.target.value”
	```

	Exemple configuració v-model:


	```
	export default {
	model: {
	prop: "toggled",
	event: "toggle"
	},
	props: ["toggled"],
	methods: {
	toggle() {
	this.$emit("toggle", !this.toggled)
	}
	}
	}
	```

	# RECURSOS

	- https://learn.adamwathan.com/advanced-vue/building-controlled-components
	-