Vue.js
Type01
main.js
<![CDATA[
import Modal from './components/Modal.vue'
Vue.component('modal', Modal)
]]>
Modal.vue
<![CDATA[
<template>
<v-layout row justify-center>
<v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even
when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
export default {
data() {
return {
dialog: false
}
}
}
</script>
]]>
Type02 - v-model
Parent component:
<![CDATA[
<template>
<v-btn color="accent" large @click.stop="showScheduleForm=true">
<ScheduleForm v-model="showScheduleForm" />
</template>
<script>
import ScheduleForm from '~/components/ScheduleForm'
export default {
data() {
return {
showScheduleForm: false
}
},
components: {
ScheduleForm
}
}
</script>
]]>
Child component:
<![CDATA[
<template>
<v-dialog v-model="show" max-width="500px">
<v-card>
<v-card-actions>
<v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: {
value: Boolean
},
computed: {
show: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
}
}
}
}
</script>
]]>
Type03
Parent component:
<![CDATA[
<template>
<v-btn color="accent" large @click.stop="showScheduleForm=true"></v-btn>
<ScheduleForm :visible="showScheduleForm" @close="showScheduleForm=false" />
</template>
<script>
import ScheduleForm from '~/components/ScheduleForm'
export default {
data() {
return {
showScheduleForm: false
}
},
components: {
ScheduleForm
}
}
</script>
]]>
Child component:
<![CDATA[
<template>
<v-dialog v-model="show" max-width="500px">
<v-card>
<v-card-actions>
<v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: ['visible'],
computed: {
show: {
get() {
return this.visible
},
set(value) {
if (!value) {
this.$emit('close')
}
}
}
}
}
</script>
]]>
Type04
Parent component:
<![CDATA[
<template>
<div>
<button @click="dialog=true">Open Dialog</button>
<Child :dialog.sync="dialog" />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data: {
return {
dialog: false
}
}
}
</script>
]]>
Child component:
<![CDATA[
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="290">
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even
when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click.native="close">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
export default {
props: {
dialog: {
default: false
}
},
methods: {
close() {
this.$emit('update:dialog', false)
}
}
}
</script>
]]>
Type05 - Simple
Parent component:
<![CDATA[
//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input', $event)">
<v-btn color="red" @click.native="$emit('input', false)">Close</v-btn>
</v-dialog>
...
props:['value']
]]>
Child component:
<![CDATA[
//Parent.vue
<custom-dialog v-model="dialog">
]]>
Type06 - Simple
Parent component:
<![CDATA[
app.vue
<template>
<div>
<button @click.prevent="openMyDialog()">my button</button>
</div>
</template>
<script>
import { bus } from '../main' // import the bus from main.js or new file
export default {
methods: {
openMyDialog() {
bus.$emit('dialog', true) // emit the event to the bus
}
}
}
</script>
]]>
Child component:
<![CDATA[
modal.vue
<script>
import { bus } from '../main'
export default {
created() {
var vm = this
bus.$on('dialog', function (value) {
vm.dialog = value
})
}
}
</script>
]]>