mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 01:12:37 +00:00
Update dynamic demo
This commit is contained in:
parent
18c8c5a726
commit
91873a8ae7
6 changed files with 118 additions and 31 deletions
49
doc/dynamicdialog/EmitsDoc.vue
Normal file
49
doc/dynamicdialog/EmitsDoc.vue
Normal file
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The <i>emits</i> object can be used to handle events emitted by the child component. Each method name used in this object must begin with 'on'. Then the emit name should come. This is an
|
||||
<a href="https://vuejs.org/guide/essentials/event-handling.html#listening-to-events">event handling</a> rule of Vue.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
this.$dialog.open(ProductListDemo, {
|
||||
emits: {
|
||||
onInfo: (e) => { // The 'on' prefix and same emit name are required.
|
||||
console.log(e); // {user: 'primetime'}
|
||||
}
|
||||
},
|
||||
};`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
// ProductListDemo
|
||||
<template>
|
||||
<Button label="Submit" @click="showInfo" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['info'],
|
||||
methods: {
|
||||
showInfo() {
|
||||
this.$emit('info', { user: 'primetime' });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue