composition API 使い方

投稿者: Auther | 3 年 前 | 0 のコメント

propsとsetupだけ

propsでコンポーネントタグに設定できる属性を管理。それ以外はsetupというメソッドで処理。

<template>
  <div class="alert alert-primary">
    <h1>{{title}}</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    msg: String
  },
  setup(props) {
    console.log(props)
  }
}
</script>

App.vue

<template>
  <div id="app">
    <HelloWorld title="Composition API"
      msg="This is Composition API sample."/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
}
</script>

JSXでは

export default {
  name: 'HelloJSX',
  props: {
    title: String,
    msg: String
  },
  setup(props) {
    return () => <div class="alert alert-primary">
      <h1>{props.title}</h1>
      <p>{props.msg}</p>
    </div>
  }
}

App.vue

<template>
  <div id="app">
    <HelloJSX title="Composition API"
      msg="This is Composition API sample."/>
  </div>
</template>

<script>
import HelloJSX from './components/HelloJSX.jsx'

export default {
  name: 'app',
  components: {
    HelloJSX
  },
}
</script>

Returnを使う場合

<script>
import { h, ref } from 'vue'

export default {
  props: {
    title: String,
    msg: String
  },
  setup(props) {
    return ()=> h('div',{class:'alert alert-primary'}, [
      h('h1', props.title),
      h('p', props.msg)
    ])
  }
}
</script>

Composition APIにdataはない refを使う

<template>
  <div class="alert alert-primary">
    <h1>{{title}}</h1>
    <p>{{data.msg}} ( {{data.count}} )</p>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  props: {
    title: String
  },
  setup(props) { //dataという定数を作成している
    const data = ref({  //値の参照 constにすることで勝手に別の値にならない
      msg: 'This is ref-value!',
      count: 0
    })
    setInterval(()=>{
      data.value.count++ //refで参照している値はvalueというメソッドで取り出す
    }, 1000)
    return {
      data   //作成された定数を返す
    }
  }
}
</script>

変数 = ref ( 値 ) 値が保管されている場所

普通の変数を使ったときはリアクティブにならない : 画面に表示した値を操作することで表示まで自動的に更新されない

参照を作成するreactive関数:リアクティブな値のコピーを返す

<script>
import { ref, reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props) {
    const data = reactive({
      msg: 'This is ref-value!',
      count: 0
    })
    setInterval(()=>{
      data.count++  //.valueは使わない
    }, 1000)
    return {
      data
    }
  }
}
</script>

reactiveで作成できるのは、オブジェクトのみ。数字や真偽値のような基本型は使えない。

基本型の値をリアクティブにしたい場合はref

オブジェクトをリアクティブにするならreactive

メソッドの利用

setup内で変数に関数を代入しておき、この変数をテンプレートに割り当てておく

<template>
  <div class="alert alert-primary">
    <h1>{{title}}</h1>
    <p class="h5">{{data.msg}}</p>
    <div>
      <input type="number" v-model="data.num"
        min="0" class="form-control">
    </div>
    <button class="btn btn-primary m-3"
      v-on:click="action">Click</button> //v-on:clickにaction指定
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props) {
    const data = reactive({
      msg: 'This is ref-value!',
      num: 0
    })
    const action = ()=> {
      let total = 0
      for(let i = 1;i <= data.num;i++) {
        total += i
      }
      data.msg = "Total: " + total
    }
    return {
      data, action
    }
  }
}
</script>

setupのcontext

setupオブジェクトには「context」も含まれる

contextオブジェクトに含まれる属性

  • attrs:コンポーネントタグに用意された属性をまとめたもの
  • slots:コンポーネント内に含まれるスロットをまとめたもの
  • emit:emitされた内容をまとめたもの

<template>
  <div class="alert alert-primary">
    <h1>{{title}}</h1>
    <p class="mt-3 h5">{{data.msg}}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props, context) {
    const data = reactive({
      msg: 'This is ref-value!',
    })
    data.msg = context.attrs['msg'].toUpperCase() //大文字に
    return {
      data
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <HelloWorld title="Composition API"
      msg="This is Composition API sample."/>
  </div>
</template>

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2024
2023
2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(5) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (120) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力