Inhalt

• Create new vue app
• Call parent method
• Two-way data binding
• Two-way data binding: v-for and objects
• Add global function with mixins

Create new vue app

• npm init vue@latest
• name your new project
• select options (No/Yes) with arrow keys
• after initial setup go to the newly created folder
• npm install
• npm run dev
• go to http://127.0.0.1:5173/

Alternativ kannst du auch mein vue3-starter Repository nutzen.

Call parent method

Parent.vue

<script>
export default {
  methods: {
    handleCreateNewTodoItem() {
      console.log("new item");
    },
  },
};
</script>

<template>
	<ButtonNewTodo @createNewTodoItem="handleCreateNewTodoItem" />
</template>

Child.vue

<script>
export default {
  emits: ["createNewTodoItem"],
  methods: {
    addNewTodoItem() {
      this.$emit("createNewTodoItem");
    },
  },
};
</script>

<template>
  <div>
    <button @click="addNewTodoItem">+</button>
  </div>
</template>

Two-way data binding

Damit Variablen auf zwei Wege verändert werden können, musst du „v-model:“ anstatt nur „v-bind:“ bzw. „:“ nutzen:

Parent.vue

<script>
export default {
	data() {
		return {
			title: "Mein Titel"
		};
	},
}
</script>
<template>
	<Child v-model:title="bookTitle" />
</template>

Child.vue

<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>
<template>
	<input
	:value="title"
	@input="$emit('update:title', $event.target.value)"
	/>
	//alternativ
	<h3 contenteditable 
	@input="$emit('update:title', $event.target.innerHTML)">
	{{ title }}</h3>
</template>

Two-way data binding: v-for and objects

Um Parameter von Objekten zu ändern, nutzen wir im Child-Element den vordefinierten modelValue Props:

Parent.vue

<script>
export default {
  data() {
    return {
      todoItems: [
        { id: 1, text: "Hausaufgaben machen", done: false },
        { id: 2, text: "Müll rausbringen", done: false },
      ],
    };
  },
};
</script>

<template>
  <div class="">
    <div v-for="(item, i) in todoItems" :key="i">
      <Child v-model="todoItems[i]" />
    </div>
  </div>
</template>

Child.vue

<script>
export default {
  props: {
    modelValue: {
      type: Object,
    },
  },
  emits: ["update:modelValue"],
  methods: {
    updateValue(key, value) {
      this.$emit("update:modelValue", 
	  { ...this.modelValue, [key]: value });
    },
  },
};
</script>

<template>
  <div class="greetings">
    <input :value="modelValue.text" 
	@input="updateValue('text', $event.target.value)" />
  </div>
</template>

Add global functions with mixins

Mixins kannst du im Ordner „/src/mixins/“ ablegen. Hier habe ich eine JS-Datei „globalFunctions.js“ erstellt:

const globalFunctions = {
  data() {
    return { counter: 0 };
  },
  methods: {
    gHelloWorld(number) {
      alert("Hello world " + number);
    },
  },
};

export default globalFunctions;

Dann können die Mixins in Components importiert werden:

export default {
  props: { typ: String, ...},
  mixins: [globalFunctions],
  ...

//Aufruf innerhalb einer Methode in export default:
this.gHelloWorld(5);

Links

• Vue.js 3 Mixins Tutorial
• Using v-model with objects in Vue3
• GitHub: MSA-Rechner
• GitHub: Simple TodoApp