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>
<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>
<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 ( 値 ) 値が保管されている場所
普通の変数を使ったときはリアクティブにならない ： 画面に表示した値を操作することで表示まで自動的に更新されない
<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」も含まれる
contextオブジェクトに含まれる属性
<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>
現在コメントはありません