Add Passing Props & Listners working example

Author: simsim0709

docs/.vuepress/components/PassedProps.vue

@@ -0,0 +1,26 @@
+<template>
+  <p class="demo">
+    <passing-props
+      title="This is from <passing-props />"
+      childPropA="This is from <passing-props-child />"
+      @click="handleClickPassingPropsChildComponent"
+    >
+    </passing-props>
+  </p>
+</template>
+
+<script>
+import PassingProps from './PassingProps';
+
+export default {
+  components: {
+    PassingProps,
+  },
+  methods: {
+    handleClickPassingPropsChildComponent() {
+      console.log('This event comes from `<passing-props-child />`');
+      alert('This event comes from `<passing-props-child />`');
+    },
+  },
+};
+</script>

docs/.vuepress/components/PassingProps.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>{{title}}</h1>
+    <passing-props-child v-bind="$attrs" v-on="$listeners"></passing-props-child>
+  </div>
+</template>
+
+<script>
+import PassingPropsChild from './PassingPropsChild';
+
+export default {
+  components: {
+    PassingPropsChild,
+  },
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      default: 'Hello, Vue!',
+    },
+  },
+};
+</script>

docs/.vuepress/components/PassingPropsChild.vue

@@ -0,0 +1,11 @@
+<template>
+  <button class="btn btn-primary" @click="$emit('click')">{{childPropA}}</button>
+</template>
+
+<script>
+export default {
+  props: {
+    childPropA: String,
+  },
+};
+</script>