From 9f3180cfe792b046b4003c52dae33e19da8ae2a2 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Sun, 17 Sep 2023 21:06:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=88=B6=E5=AD=90=E7=BB=84=E4=BB=B6=E4=BA=92?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/component-v-model/App.vue                | 27 +++++++
 .../components/ChildComponentA.vue            | 24 +++++++
 src/App.vue                                   | 59 +++++++++-------
 src/components/ChildComponentA.vue            | 70 ++++++++++++-------
 4 files changed, 132 insertions(+), 48 deletions(-)
 create mode 100644 demo/component-v-model/App.vue
 create mode 100644 demo/component-v-model/components/ChildComponentA.vue

diff --git a/demo/component-v-model/App.vue b/demo/component-v-model/App.vue
new file mode 100644
index 0000000..654ac8c
--- /dev/null
+++ b/demo/component-v-model/App.vue
@@ -0,0 +1,27 @@
+<template>
+  <!-- 2. 通过v-model:参数名的方式传递数据 -->
+  <ChildComponentA v-model:name="p_name" v-model:title="p_title"></ChildComponentA>
+  <br>
+  <label>这是父组件内容：</label>
+  <p>名称：{{ p_name }}</p>
+  <p>标题：{{ p_title }}</p>
+</template>
+
+<script>
+import ChildComponentA from "@/components/ChildComponentA.vue";
+
+export default {
+  components: {ChildComponentA},
+  // 1. 定义用于互通的数据
+  data() {
+    return {
+      p_name: '父组件name数据',
+      p_title: '父组件title数据',
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/demo/component-v-model/components/ChildComponentA.vue b/demo/component-v-model/components/ChildComponentA.vue
new file mode 100644
index 0000000..3b1aff3
--- /dev/null
+++ b/demo/component-v-model/components/ChildComponentA.vue
@@ -0,0 +1,24 @@
+<template>
+  <label>这是子组件内容：</label>
+  <!-- 3. 使用$emit绑定事件并且回传参数 -->
+  名称：<input type="text" :value="name" @input="$emit('update:name', $event.target.value)"/>
+  标题：<input type="text" :value="title" @input="$emit('update:title', $event.target.value)"/>
+  <p>名称是：{{name}}</p>
+  <p>标题是：{{title}}</p>
+</template>
+
+<script>
+export default {
+  // 1. 子组件定义用于映射父组件数据的变量
+  props: {
+    name: String,
+    title: String,
+  },
+  // 2. 注册自定义事件
+  emits: ['update:name', 'update:title'],
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/App.vue b/src/App.vue
index a167f21..ce2d602 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,15 @@
 <template>
-  <!-- 3. 添加自定义事件selected -->
-  <ChildComponentA title="list—data" :list_data="todos" @selected="onSelected"></ChildComponentA>
-  <div>
-    <h3>您选中了{{ selected_status }}</h3>
-  </div>
+  <ChildComponentA>
+    <template v-slot:header>
+      <P>提示</P>
+    </template>
+    <template v-slot:default="slotProps">
+      <p>我的错误是<span>{{ slotProps.types['404'] }}</span></p>
+    </template>
+    <template v-slot:footer="{types, sources}">
+      <div>错误来自：{{sources['page']}} - {{types['404']}}</div>
+    </template>
+  </ChildComponentA>
 </template>
 
 <script>
@@ -11,28 +17,33 @@ import ChildComponentA from "@/components/ChildComponentA.vue";
 
 export default {
   components: {ChildComponentA},
-  data() {
-    return {
-      todos: [
-          'todo-1',
-          'todo-2',
-          'todo-3',
-          'todo-4',
-          'todo-5'
-      ],
-      // 1. 定义一个变量，用于接收子组件中回传的数据
-      selected_status: ''
-    }
-  },
-  methods: {
-    // 2. 创建一个方法处理接收到的数据，映射到本地，同时在使用子组件标签时进行事件绑定
-    onSelected(item) {
-      this.selected_status = item;
-    }
-  }
 }
 </script>
 
 <style scoped>
+.wrap {
+  border: 1px solid #f66;
+  color: #f66;
+  padding: 10px;
+  position: relative;
+  max-width: 300px;
+}
+
+.header {
+  font-size: 20px;
+  color: #333;
+  font-weight: bold;
+}
 
+.close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.footer {
+  color: #666;
+  font-size: 12px;
+  text-align: right;
+}
 </style>
diff --git a/src/components/ChildComponentA.vue b/src/components/ChildComponentA.vue
index 2da5514..a409c2d 100644
--- a/src/components/ChildComponentA.vue
+++ b/src/components/ChildComponentA.vue
@@ -1,38 +1,60 @@
 <template>
-  <h3>{{ title }}</h3>
-  <ul>
-    <!--  触发事件  -->
-    <li v-for="(item, index) in list_data" :key="index" @click="handleClick(item)">{{ index }} - {{ item }}</li>
-  </ul>
+  <div class="wrap">
+    <div class="header">
+      <slot name="header">错误</slot>
+      <div class="close">关闭</div>
+    </div>
+    <div>
+      <slot :types="types"></slot>
+    </div>
+    <div class="footer">
+      <slot name="footer" :types="types" :sources="sources"></slot>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  props: {
-    title: String,
-    list_data: {
-      type: Array,
-      default: () => [],
-      required: true,
-      validator: value => {
-        return value.length >= 0
+  data() {
+    return {
+      types: {
+        404: 'Page Not Found',
+        500: 'System Error',
+      },
+      sources: {
+        system: '系统',
+        page: '页面',
+        console: '控制台',
       }
     }
-  },
-  // 1. 注册自定义事件
-  emits: ['selected'],
-  methods: {
-    // 2. 封装一个本地发法，用于触发$emit, $emit格式为(自定义事件名称，参数)
-    handleClick(item) {
-      this.$emit("selected", item);
-    }
-  },
-  mounted() {
-    console.log(this.list_data)
   }
 }
 </script>
 
 <style scoped>
+.wrap {
+  border: 1px solid #f66;
+  color: #f66;
+  padding: 10px;
+  position: relative;
+  max-width: 300px;
+}
+
+.header {
+  font-size: 20px;
+  color: #333;
+  font-weight: bold;
+}
 
+.close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.footer {
+  color: #666;
+  font-size: 12px;
+  text-align: right;
+}
 </style>