2019.10.22
// page.vue (呼び出し元)
<Btn :to="'/'" :className="{active: true}">実行する！</btn>
// btn.vue (受け取り側)
<template>
<router-link class="btn" :class="className" :to="to"><slot></slot></router-link>
</template>
Vue.jsでコンポーネントでパーツを細分化する際に、CSSのクラス制御が面倒だったので、簡略化できる方法を考えました。:classは「クラス名:boolean」形式の連想配列を処理するので、呼び出し元で「:className="クラス名:true"」として、受け取り側のコンポーネントで配列を受け取ります。なお、受け取り側はプロパティ名は「class」は使えません。この方法なら、関数型コンポーネントでも動的にクラスを付与できます。
import { createApp } from 'vue'
import App from './App.vue'
import dayjs from 'dayjs';
const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs
app.mount('#app')import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { store } from './stores/'
const app = createApp(App);
app.use(routes);
app.use(store);
app.mount('#app')<template>
<p id="exscript">
<ins class="banner"></ins>
</p>
</template>
<script>
export default {
mounted() {
let scriptEl = document.createElement('script')
scriptEl.setAttribute('src', 'スクリプトのURL')
document.getElementById('exscript').appendChild(scriptEl)
}
}
</script>{
"name": "hoge",
"scripts": {
"build": "gridsome build",
"develop": "gridsome dev",
"lint": "vue-cli-service lint",
"deploy": "gridsome build && netlify deploy --dir=dist/ -p"
}
}