组件学习：基本知识，选项式API&组合式API，组件通信 props，组件通信 $emit

demo/component-api/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <!-- 第三步使用 -->
+  <ChildComponentA :name="name1"></ChildComponentA>
+  <ChildComponentB :name="name2"></ChildComponentB>
+  <ChildComponentC :name="name3"></ChildComponentC>
+</template>
+
+<script>
+// 第一步 import
+import ChildComponentA from "@/components/ChildComponentA.vue";
+import ChildComponentB from "@/components/ChildComponentB.vue";
+import ChildComponentC from "@/components/ChildComponentC.vue";
+
+export default {
+  // 第二步 注册
+  components: {ChildComponentA, ChildComponentB, ChildComponentC},
+  data() {
+    return {
+      name1: "组件A名称",
+      name2: "组件B名称",
+      name3: "组件C名称"
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

demo/component-api/components/ChildComponentA.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <div>{{ twiceTheCounter }}</div>
+  <button @click="action">点击</button>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String
+  },
+  data() {
+    return {
+      counter: 0,
+      obj: {title: "组件A标题"}
+    }
+  },
+  computed: {
+    twiceTheCounter() {
+      return this.counter * 2
+    }
+  },
+  watch: {
+    counter(newValue, oldValue) {
+      console.log(newValue, oldValue);
+      this.obj.title = "组件A标题---新"
+    }
+  },
+  methods: {
+    action() {
+      this.counter = this.counter + 3;
+    }
+  },
+  mounted() {
+    console.log('mounted')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

demo/component-api/components/ChildComponentB.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <div>{{ twiceTheCounter }}</div>
+  <button @click="action">点击</button>
+</template>
+
+<script>
+import {ref, reactive, onMounted, watch, computed} from "vue";
+
+export default {
+  props: {
+    name: String,
+  },
+
+  setup() {
+    // data
+    const counter = ref(0);
+    const obj = reactive({title: "组件B标题"});
+    // computed
+    const twiceTheCounter = computed(() => counter.value * 2);
+    // watch
+    watch(counter, (newValue, oldValue) => {
+      console.log(newValue, oldValue);
+      obj.title = "组件B标题---新"
+    });
+    // methods
+    const action = () => {
+      counter.value = counter.value + 3;
+    };
+    // hook
+    onMounted(() => console.log("onMounted"));
+
+    return {
+      counter,
+      obj,
+      twiceTheCounter,
+      action
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

demo/component-api/components/ChildComponentC.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <div>{{ twiceTheCounter }}</div>
+  <button @click="action">点击</button>
+</template>
+
+<script setup>
+import {ref, reactive, onMounted, watch, computed} from "vue";
+// props
+const props = defineProps({
+  name: String,
+})
+// data
+const counter = ref(0);
+const obj = reactive({title: "组件C标题"});
+// computer
+const twiceTheCounter = computed(() => counter.value * 2);
+// watch
+watch(counter, (newValue, oldValue) => {
+      console.log(newValue, oldValue);
+      obj.title = "组件C标题---新"
+    }
+);
+// methods
+const action = () => {
+  counter.value = counter.value + 3;
+}
+// hook
+onMounted(() => {
+  console.log("onMounted")
+})
+</script>
+
+<style scoped>
+
+</style>

demo/component-emit/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <!-- 3. 添加自定义事件selected -->
+  <ChildComponentA title="list—data" :list_data="todos" @selected="onSelected"></ChildComponentA>
+  <div>
+    <h3>您选中了{{ selected_status }}</h3>
+  </div>
+</template>
+
+<script>
+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>
+
+</style>

demo/component-emit/components/ChildComponentA.vue

@@ -0,0 +1,38 @@
+<template>
+  <h3>{{ title }}</h3>
+  <ul>
+    <!--  触发事件  -->
+    <li v-for="(item, index) in list_data" :key="index" @click="handleClick(item)">{{ index }} - {{ item }}</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    list_data: {
+      type: Array,
+      default: () => [],
+      required: true,
+      validator: value => {
+        return value.length >= 0
+      }
+    }
+  },
+  // 1. 注册自定义事件
+  emits: ['selected'],
+  methods: {
+    // 2. 封装一个本地发法，用于触发$emit, $emit格式为(自定义事件名称，参数)
+    handleClick(item) {
+      this.$emit("selected", item);
+    }
+  },
+  mounted() {
+    console.log(this.list_data)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

demo/component-props/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- 第三步使用 -->
+  <ChildComponentA :parent_param="param" :parent_param_full="param2"></ChildComponentA>
+</template>
+
+<script>
+// 第一步 import
+import ChildComponentA from "@/components/ChildComponentA.vue";
+
+export default {
+  // 第二步 注册
+  components: {ChildComponentA},
+  data() {
+    return {
+      param: "这是父组件传递的参数1",
+      param2: "这是父组件传递的参数2"
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

demo/component-props/components/ChildComponentA.vue

@@ -0,0 +1,33 @@
+<template>
+  <h1>{{parent_param}}</h1>
+  <h2>{{parent_param_full}}</h2>
+  <h3>这是子组件h3标签</h3>
+</template>
+
+<script>
+export default {
+  name: "ChildComponentA",
+  // 基本形式
+  // props: ['parent_param', ]
+  // 增加数据类型
+  props: {
+    parent_param: String,
+    parent_param_full: {
+      type: String,
+      default: "子组件的默认值",
+      // 对象或数组默认值必须从一个工厂函数获取
+      // default: function () {
+      //   return { message: 'hello' }
+      // },
+      required: true,
+      validator: value => {
+        return value.length > 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/App-org.vue

@@ -1,26 +0,0 @@
-<template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/App.vue

@@ -1,44 +1,38 @@
 <template>
-  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <!-- 3. 添加自定义事件selected -->
-  <div>{{ twiceTheCounter }}</div>
+  <ChildComponentA title="list—data" :list_data="todos" @selected="onSelected"></ChildComponentA>
-  <button @click="action">触发action方法</button>
+  <div>
+    <h3>您选中了{{ selected_status }}</h3>
+  </div>
 </template>
 
 <script>
+import ChildComponentA from "@/components/ChildComponentA.vue";
+
 export default {
-  // name: "App",
+  components: {ChildComponentA},
-  props: {
-    name: String,
-  },
   data() {
     return {
-      counter: 0,
+      todos: [
-      obj: {title: "标题"}
+          'todo-1',
-    }
+          'todo-2',
-  },
+          'todo-3',
-  computed: {
+          'todo-4',
-    twiceTheCounter() {
+          'todo-5'
-      return this.counter * 2
+      ],
-    }
+      // 1. 定义一个变量，用于接收子组件中回传的数据
-  },
+      selected_status: ''
-  watch: {
-    counter(newValue, oldValue) {
-      console.log(newValue, oldValue);
-      this.obj.title = "标题变了"
     }
   },
   methods: {
-    action() {
+    // 2. 创建一个方法处理接收到的数据，映射到本地，同时在使用子组件标签时进行事件绑定
-      this.counter = this.counter + 3;
+    onSelected(item) {
+      this.selected_status = item;
     }
-  },
-  mounted() {
-    console.log('mounted')
   }
 }
 </script>
 
-
 <style scoped>
 
 </style>

src/components/ChildComponentA.vue

@@ -0,0 +1,38 @@
+<template>
+  <h3>{{ title }}</h3>
+  <ul>
+    <!--  触发事件  -->
+    <li v-for="(item, index) in list_data" :key="index" @click="handleClick(item)">{{ index }} - {{ item }}</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    list_data: {
+      type: Array,
+      default: () => [],
+      required: true,
+      validator: value => {
+        return value.length >= 0
+      }
+    }
+  },
+  // 1. 注册自定义事件
+  emits: ['selected'],
+  methods: {
+    // 2. 封装一个本地发法，用于触发$emit, $emit格式为(自定义事件名称，参数)
+    handleClick(item) {
+      this.$emit("selected", item);
+    }
+  },
+  mounted() {
+    console.log(this.list_data)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main-org.js

@@ -1,8 +0,0 @@
-import {createApp} from 'vue'
-import ElementPlus from 'element-plus'  // 完整引入Element-Plus
-import 'element-plus/dist/index.css'  // 引入样式文件
-import App from './App-org.vue'
-
-const app = createApp(App)
-app.use(ElementPlus, {size: 'small', zIndex: 3000})
-app.mount('#app')

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  lintOnSave: false
 })