Vuejsの学習のまとめ

目次 1.　Vuejs2でのthisの使い方 2.　上記の親ファイルのコード 3.　データ渡しのメソッドについて 4. props, $emitをEventManagement.vueに書く

Vuejs２でのthisの使い方

<template>
<div>
<p>Good({{ halfNum }})</p>
<button @click="increment">+3</button>
</div>
</template>

methods: {
    increment() {
      this.$emit("my-click", this.number + 3);
}
  }
};

上記の親ファイルのコード

v-bindまたは:{{オブジェクト名}}を記述する。 ### テンプレートにイベントを登録する ```javascript

{{ number}}

//$eventとnumberをレンダリング

<h2>データ渡しのメソッドについて</h2>
親から子へのデータの受け渡しで、$eventとして、登録でき
テンプレートを作成する。

```javascript
  methods: {
    increment() {
      this.$emit("my-click", this.number + 3);
    }
  } 
};

$emitを子から親へデータの受け渡しを設定する

###親側のコード

<template>
<div>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
  <div>
   <h2>イベント管理</h2>
   <EventManagement v-model="eventData.title"></EventManagement>　
</template>
export default {
  data() {
    return {
      currentComponent: "sample"
      eventData: {
        title:"入力内容"
      }
    };
  },
  components: {
    sample,
    EventManagement
}

props, $emitをEventManagement.vueに書く

親ファイルのテンプレートのコードを省略できる。

<template>
    <div>
        <label for="title">Theme</label>
        <input
         id="title"
         type="text"
        :value="value"
        @input="$emit('input',$event.target.value)" 
        >
        <pre>{{ value }}</pre>
    </div>
</template>

<script>
export default {
    props: ["value"]
};
</script>