docs: update docs

Author: hunterliu1003

docs/content/2.get-started/2.advanced/1.Testing.md renamed to docs/content/2.get-started/.2.advanced/1.Testing.md

@@ -23,35 +23,114 @@ import { ModalsContainer } from 'vue-final-modal'
 
 ## Usage
 
+### Passing Props and Events
+
 ```ts
 import { VueFinalModal, useModal } from 'vue-final-modal'
 
-const modalInstance = useModal({
+const { open, close, options, patchOptions } = useModal({
+  // `component` is optional and the default value is `<VueFinalModal>`.
   component: VueFinalModal,
+  // Open the modal or not when the modal was created, the default value is `false`.
+  defaultModelValue: false,
   attrs: {
-    // Props
-    displayDirective: 'if',
+    // Bind props to the modal component (VueFinalModal in this case).
     clickToClose: true,
     escToClose: true,
-    // Events
+    // Bind events to the modal component (VueFinalModal in this case).
     onBeforeOpen() { /* on before open */ },
     onOpened() { /* on opened */ },
     onBeforeClose() { /* on before close */ },
     onClosed() { /* on closed */ },
-  },
+  }
+})
+
+// Open the modal
+open().then(() => { /* Do something after modal opened */ })
+// Close the modal
+close().then(() => { /* Do something after modal closed */ })
+// Checkout the modal options
+options // the state of the dynamic modal
+
+// Overwrite the modal options
+patchOptions({
+  attrs: {
+    // Overwrite the modal's props
+    clickToClose: false,
+    escToClose: false,
+  }
+})
+```
+
+### Passing Slots
+
+#### with `String`
+
+
+```ts
+import { VueFinalModal, useModal } from 'vue-final-modal'
+
+const modalInstance = useModal({
+  component: VueFinalModal,
+  attrs: { ... },
   slots: {
     default: '<p>The content of the modal</p>'
   }
 })
+```
+
+::alert{type=warning}
+Security Note: https://vuejs.org/api/built-in-directives.html#v-html
+Dynamically rendering arbitrary HTML on your website can be very dangerousbecause it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.
+::
+
+#### with `Component`
 
-modalInstance.open().then(() => { /* Do something after modal opened */ })
-modalInstance.close().then(() => { /* Do something after modal closed */ })
-modalInstance.options // the state of the dynamic modal
 
-// Overwrite the dynamic modal options
-modalInstance.patchOptions({})
+```ts
+import { VueFinalModal, useModal } from 'vue-final-modal'
+// ModalContent is the component you want to put into the modal content
+import ModalContent from './ModalContent.vue'
+
+
+const modalInstance = useModal({
+  component: VueFinalModal,
+  attrs: { ... },
+  slots: {
+    // You can import your own component as a slot and put it to `slots.default` without binding props and events.
+    default: ModalContent
+  }
+})
 ```
 
+#### with `Component`, `Props` and `Events`
+
+```ts
+import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
+// ModalContent is the component you want to put into the modal content
+import ModalContent from './ModalContent.vue'
+
+const modalInstance = useModal({
+  component: VueFinalModal,
+  attrs: { ... },
+  slots: {
+    default: useModalSlot({
+      component: ModalContent,
+      attrs: {
+        // Bind ModalContent props
+        title: 'Hello world!'
+        // Bind ModalContent events
+        onConfirm() {  }
+      }
+    })
+  }
+})
+```
+
+::alert{type=info}
+`useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
+::
+
 ## Edge Usage
 
 ::alert{type=danger}