chore(dev): v-if + emit in mounted

Akryum · Akryum · commit 31b1b6ff6231 · 2021-02-01T01:23:44.000+01:00
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue
@@ -7,6 +7,7 @@ import EventNesting from './EventNesting.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import SuspenseExample from './SuspenseExample.vue'
 import Provide from './Provide.vue'
+import Condition from './Condition.vue'
 
 export default {
   name: 'MyApp',
@@ -19,7 +20,8 @@ export default {
     EventNesting,
     AsyncComponent,
     SuspenseExample,
-    Provide
+    Provide,
+    Condition
   }
 }
 </script>
@@ -34,6 +36,7 @@ export default {
   <AsyncComponent />
   <SuspenseExample />
   <Provide />
+  <Condition />
 
   <nav>
     <router-link to="/p1">
diff --git a/packages/shell-dev-vue3/src/Condition.vue b/packages/shell-dev-vue3/src/Condition.vue
@@ -0,0 +1,28 @@
+<script>
+export default {
+  components: {
+    InIf: {
+      name: 'InIf',
+      mounted () {
+        this.$emit('hi')
+      },
+      template: '<div>Inside v-if</div>'
+    }
+  },
+
+  data () {
+    return {
+      show: true
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <button @click="show = !show">
+      Toggle
+    </button>
+    <InIf v-if="show" />
+  </div>
+</template>
