Vue.js propsの使い方~親から子へ値を渡す方法~
はじめに
SPAでページを作成していた際に、親コンポーネントから子コンポーネントへ値を渡すPropsを使用しました。
Propsについて簡単にまとめましたので、こちらを読んでいただければPropsについて基本的な使い方はわかるかと思います。
Propsとは
簡単にいうと、親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡すことができるものです。
基本的な使い方
今回はページのコンテンツタイトルをコンポーネント化した簡単な例です。
（親）
<template>
<ContentsTitle title="about" />
</template>
<script>
import Vue from 'vue'
// 子コンポーネントをimport
import ContentsTitle from '../components/ContentsTitle.vue'
Export default{
// コンポーネントの指定
components:{
ContentsTitle
}
}
</script>
（子）
親は子コンポーネントをimportし、{{ title }}に"about"という文字列を渡して表示します。
・コンポーネントの再利用
<title title="about" />
<title title="news" />
今回のようなタイトルのコンポーネントの場合、１ページにいくつもコンテンツがあり、都度同じスタイルでコンテンツタイトルを表示している場合、子へ渡す値を変更するだけで再利用が可能です。
・v-bindを利用した場合
<template>
<div id="app">
<title v-bind:title="data_title" />
</div>
</template>
<script>
import ContentsTitle from "./components/ContentsTitle.vue";
export default {
name: "App",
components: {
ContentsTitle,
},
data() {
return {
//ここに指定した値をviewに表示する
data_title: "news",
};
},
};
</script>
Vueのデータプロパティを利用して値を渡せます。その際はバインドをする必要があるのでtitleの前にv-bindを設定します。
・PropsのTypeを設定
ContentsTitleコンポーネントのpropsのtitleには、文字列が入るのでまずtypeにStringを設定します。Stringの先頭文字は大文字です。
小文字にするとエラーになります。
これでtitleにはString(文字列）が入ってくることを宣言しています。
違うタイプを渡すと、タイプが違うとGoogleコンソール上で警告が出ます。
typeの種類
|
String |
文字列 |
|
Number |
数値型 |
|
Array |
配列型 |
|
Boolean |
真偽値 |
|
Object |
オブジェクト型 |
|
Function |
関数 |
|
Date |
日付 |
|
null |
全て許容 |
|
undefined |
全て許容 |
・Propsのデフォルト値の設定
<script>
export default{
props: {
name: {
type: String,
//デフォルト値を指定
default: "about",
},
},
}
</script>
デフォルト値を指定せず、子コンポーネントに値を渡していない場合、
子コンポーネントには何も値が入っていない状態です。
そのような場合は何も表示されません。
Propsを必須にするにはrequiredを使用します。
<script>
props: {
name: {
type: String,
//trueを指定することで、propsが必須となります。
required: true,
},
},
</script>
required: trueを指定し、子コンポーネントに値を渡していない場合、Googleコンソール上で警告が出ます。
デフォルト値を指定している場合はpropsに値が必ず入るので、required: trueにしとく必要はありません。
Array型とobject型の注意点
ArrayとObject型の場合は、defaultの設定値は関数にする必要があります。
参考
https://reffect.co.jp/vue/vue-js-master-props-for-beginner
https://jp.vuejs.org/v2/guide/components-props.html
Vue.js Vue-routerで画面遷移先にパラメーターを渡す方法
はじめに
Vue.jsのVue-routerを使用しアプリケーションを作成していたのですが、
ページの遷移先にパラメータを渡す方法がわかりませんでした。
無事パラメーターを渡せたので、方法を残します。
コード
・index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home', //名前付きルート
component: Home
},
{
path: ‘ /sample’,
name: ’Sample’, //名前付きルート
component: () => import('../views/sample.vue')
}, {
path: ‘ /test’,
name: ’Test’, //名前付きルート
component: () => import('../views/test.vue')
}
]
const router = new VueRouter({
base: process.env.BASE_URL,
routes
})
export default router
・リンク元 (sample.vue)
Router-linkタグを使いname(名前付きルート)を記述しリンクを作成します。
その際に、params:でパラメーターを指定しリンク先へ渡します。
・リンク先(test.vue)
<template>
<p>{{$route.params.text}}</p>
</template>
{{ $route.params.text }} のように通常の変数と同じ方法で受け取ったパラメーターを展開できます。
クエリパラメータを渡す
調べていたらクエリパラメーターを渡す方法も、router-linkで同様の手順で簡単に渡せるので併せて記述。
コード
・リンク元
<template>
<router-link :to = "{ name: 'Test', query:{str: 'test'} }">
クエリパラメーター</router-link>
</template>
・リンク先
<template>
<p>{{$route.query.text}}</p>
</template>
Router-linkタグに”query:”を記載します。
ちなみにqueryについてはname(名前付きルート)を使用しなければならないという制約はないようです。
参考サイト
Vue.js Vuetifyを使い簡単にモーダルを作成する方法
はじめに
Vue.jsに限らず、モーダルの作成には少し手間がかかると思います。
しかし、Vuetifyを導入することでモーダルを楽に作れるので、備忘録として残します。
Vuetifyのインストールはこちら
広告：フロントエンドエンジニアになりたい人の Webプログラミング入門 
コード
<template>
<div class="text-center">
<v-btn @click="overlay = !overlay">
モーダルオープン
</v-btn>
<div class="modal-wrapper" style="background: #fff">
<p style="color:#111;">モーダルです</p>
<v-btn color="error" @click="overlay = !overlay ">閉じる</v-btn>
</div>
</v-overlay>
</div>
</template>
<script>
export default {
data: () => ({
overlay: false,
})
}
</script>
解説
<v-overlay :value="overlay"></v-overlay>
こちらが言葉の通りオーバーレイを表示する要素です。
data()内にあるoverlay: false;の時非表示、trueの時に表示します。
上記のようにHTMLの要素を作成するので、CSSでのカスタマイズも可能。
この要素の中にモーダルで表示したい内容を記述することで、モーダルを実装します。
<v-btn color="error” @click="overlay = !overlay "></btn>
v-btnでボタンを作成しています。
@clickでクリックイベントを指定し、overlay = !overlayでTrue,falseを切り替え表示、非表示を実装します。
参考サイト
https://vuetifyjs.com/ja/components/overlays/
Vue.js axiosでAPIを取得する際のCORSエラーの回避方法
はじめに
開発環境のVue.jsでaxiosを使いホットペッパーのAPIを叩き、
店舗情報を表示するアプリを勉強がてら作成していたところ、
CORS(Access-Control-Allow-Origin)のエラーが発生した為、
その原因等を簡単に調べたため、エラー回避方法を備忘録として残します。
【おすすめ】フロントエンドエンジニアになりたい人の Webプログラミング入門
問題点
Originが違うため、ブラウザでアクセスが拒否されます。
解決方法
・CORSを設定する
・proxyを使って、回避する。
今回はproxyを使用し解決
まず、Vue.js側のroot階層に、vue.config.jsファイルを作成し、
下記コードを書きます。
あとは axios を使って呼び出す際にアクセスする、
URI の部分を指定します。
上記の様にすることで、すべてのリクエストは一度プロキシを経由し、
アクセスするようになります。
今回はレスポンスがXMLデータのため、
json形式に変換するためXml2jsonを使用しています。
Home.vue
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
export default {
data(){
return{
items: null
}
},
mounted(){
var parseString = require('xml2js').parseString;
.then(response => {
var self = this
parseString(response.data, function (err, result) {
self.items = result.results.shop
});
})
}
}
これで無事に、policyを回避し処理することができました。
参考サイト
