Open4
Vueの用途別チートシート🌟
まさぴょん🐱Vueのthis.$emit で、引数を複数渡す方法は？
- 3パターンあるので、注意！
- 次のやり方がシンプルでおすすめ。
- 引数はいくつ持たせても大丈夫ですが、$emitで送るデータ名と親で受け取る際の引数名は同じにしておく必要がある点に注意。
// 子コンポーネント
this.$emit('hoge', データ1, データ2);
// 親コンポーネント
methods: {
hoge(データ1, データ2) {
// 処理
}
}
まさぴょん🐱Propsの親Componentでの変更を子Componentで検知をする方法
-
watchで変更を監視・検知して、Updateする。
props: {
/** Block の表示 ON/OFF 制御フラグ */
isDisplay: {
type: Boolean,
default: true,
},
},
data() {
return {
/** アイテムの表示制御(アコーディオン機能) */
isDisplayFlag: this.isDisplay,
}
},
watch: {
/** Props の isDisplay が 親 Component で Update されたら こちら(子Component)も Update する */
isDisplay(newValue, oldValue) {
this.isDisplayFlag = newValue
},
},
Vue の $ref の使い方
<!-- File_Input -->
<input
type="file"
id="user_profile_icon"
class="icon_upload"
accept="image/*"
@change="handleFileChange"
ref="user_icon"
/>
// ------------------------ 省略 ------------------------
$refs で、Vue_DOM 上の user_icon (id名) から file情報を取得する
console.log(this.$refs.user_icon.files[0])
- 以前に書いた記事
まさぴょん🐱Vue で 親 Component から 子Componentのメソッドを Call する方法
Vue で 親 Component から 子Componentのメソッドを Call する方法は、次のどちらか。
- Event Busを使った、親コンポーネントから子コンポーネントへのイベント伝播
- $refsを使った、直接DOM参照 Call
推奨は、Event Busを使った、親コンポーネントから子コンポーネントへのイベント伝播の方法
Event Busを使った、親コンポーネントから子コンポーネントへのイベント伝播
// EventBus
const bus = new Vue();
// 子
const child = new Vue({
created: function () {
bus.$on('hoge', this.hoge); // hogeイベントハンドラ登録
}
methods: {
hoge: function () {
console.log('hoge...');
}
},
template: '<template>child.</template>'
})
// 親
const parent = new Vue({
components: {
child
},
methods: {
hoge: function () {
bus.$emit('hoge'); // hogeイベント発火
}
},
template: '<template><child ref="child"/></template>'
})
$refsを使った、直接DOM参照 Call
// 子
const child = new Vue({
methods: {
hoge: function () {
console.log('hoge...');
}
},
template: '<template>child.</template>'
})
// 親
const parent = new Vue({
components: {
child
},
methods: {
hoge: function () {
this.$refs.child.hoge(); // 子コンポーネントメソッド呼び出し
}
},
template: '<template><child ref="child"/></template>'
})
Nuxt.js での Event Bus 利用
- nuxtにはすでに$nuxtというグローバル・Vueオブジェクトがある
- $nuxtにはどこからもアクセス可能
- Vueオブジェクトなので、$emit | $on | $offが使える！
発信側：
<template lang="pug">
<header>
<button @click="onClick">click</button>
</header>
<nuxt>
<footer></footer>
</template>
<script>
methods: {
onClick() {
// グローバルなオブジェクトにエミット
this.$nuxt.$emit('rootClick')
}
}
</script>
受信側：
<template lang="pug">
<div class="content">
<h1>page</h1>
</div>
</template>
<script>
mounted() {
// グローバルなオブジェクトにハンドラ追加
this.$nuxt.$on('rootClick', onRootClick)
},
beforeDestroy() {
// ちゃんと後処理
this.$nuxt.$off('rootClick')
},
methods: {
onRootClick() {
// header無いのボタンがクリックされました！
}
}
</script>
参考・引用
ログインするとコメントできます