ko.vue
<el-button type="text" @click="tuuhouVisible = true">modal 開く</el-button>
<el-dialog
title="モーダル"
v-model="tuuhouVisible"
width="90%"
:show-close=true
:close-on-click-modal=false
>
<div>
{{model}}<br>
{{foreign_key}}<br>
{{user_id}}<br>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="tuuhouVisible = false">キャンセル</el-button>
<el-button type="primary" @click="tuuhouVisible = false">送信</el-button>
</span>
</el-dialog>
//略
<script>
export default {
props: [
'model',
'foreign_key',
'user_id',
],//設定することで親から値を渡すことができる
data(){
return {
tuuhouVisible:false
}
},
oya.vue
<TuuhouComponent model="User"
:foreign_key="this.$route.params.id"
:user_id="this.$root.user.id"></TuuhouComponent>
こんな感じ。
ko.vueを
v-model="tuuhouVisible"
という感じで指定するのが味噌みたい。