自定义组件学习1

20_脚手架/vue_code/src/App.vue

@@ -1,118 +1,52 @@
 <template>
-  <div id="root">
+  <div class="app">
-    <div class="todo-container">
+    <h1>{{ msg }}</h1>
-      <div class="todo-wrap">
+    <!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
-        <TodoHeader :addTodo="addTodo"/>
+    <School :getSchoolName="getSchoolName"/>
-        <TodoList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
+    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式  -->
-        <TodoBottom :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
+    <!--    <Student v-on:studentName="getStudentName"/>-->
-      </div>
+    <!--    <Student @studentName="getStudentName"/>-->
-    </div>
+    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式  -->
+    <Student ref="student"/>
   </div>
 </template>
 
 <script>
-import TodoHeader from "./components/TodoHeader.vue";
+import School from "./components/School.vue";
-import TodoList from "./components/TodoList.vue";
+import Student from "./components/Student.vue";
-import TodoBottom from "./components/TodoBottom.vue";
-
 
 export default {
   name: "App",
   components: {
-    TodoHeader,
+    School,
-    TodoList,
+    Student
-    TodoBottom
   },
   data() {
     return {
-      // 预置测试数据
+      msg: "Hello:"
-      todos: JSON.parse(localStorage.getItem('todos')) || []
     }
   },
-  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
-  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
   methods: {
-    // 添加todo任务，绑定到TodoHeader中
+    getSchoolName(schoolName) {
-    addTodo(todoObj) {
+      console.log("获取学校名称", schoolName)
-      this.todos.unshift(todoObj)
-    },
-
-    // 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中
-    checkTodo(id) {
-      this.todos.forEach((todo) => {
-        if (todo.id === id) todo.done = !todo.done
-      })
-    },
-
-    // 删除单个todo任务，穿透TodoList绑定到TodoItem中
-    deleteTodo(id) {
-      this.todos = this.todos.filter(todo => todo.id !== id)
-    },
-
-    // 勾选或取消勾选全部todo任务，绑定到TodoBottom中
-    checkAllTodo(done) {
-      this.todos.forEach((todo) => todo.done = done)
     },
+    getStudentName(name, ...params) {
+      console.log("getStudentName", name, params)
 
-    // 清除全部已完成的todo任务，绑定到TodoBottom中
-    clearAllTodo() {
-      this.todos = this.todos.filter((todo) => {
-        return !todo.done
-      })
     }
   },
-  watch: {
+  mounted() {
-    todos: {
+    // this.$refs.student.$on("studentName", this.getStudentName)
-      deep: true,
+    setInterval(() => {
-      handler(value) {
+      this.$refs.student.$on("studentName", this.getStudentName)
-        localStorage.setItem('todos', JSON.stringify(value))
+    }, 3000)
-      }
-    }
   }
 }
 </script>
 
 <style>
-body {
+.app {
-  background: #fff;
+  background-color: gray;
-}
+  padding: 15px
-
-.btn {
-  display: inline-block;
-  padding: 4px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-}
-
-.btn-danger {
-  color: #fff;
-  background-color: #da4f49;
-  border: 1px solid #bd362f;
-}
-
-.btn-danger:hover {
-  color: #fff;
-  background-color: #bd362f;
-}
-
-.btn:focus {
-  outline: none;
-}
-
-.todo-container {
-  width: 600px;
-  margin: 0 auto;
-}
-
-.todo-container .todo-wrap {
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
 }
 </style>

20_脚手架/vue_code/src/components/School.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+<!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
+    <button @click="sendSchoolName">把学校名称传给App</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  props: ["getSchoolName"],
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+    }
+  },
+  methods: {
+    sendSchoolName() {
+      this.getSchoolName(this.name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: skyblue;
+  padding: 15px
+}
+</style>
+

20_脚手架/vue_code/src/components/Student.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="student">
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+    <button @click="sendStudentName">把学生名称传给App</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18,
+    }
+  },
+  methods: {
+    sendStudentName() {
+      // 触发Student组件实例上的studentName事件
+      this.$emit("studentName", this.name, 666, 777, 888)
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.student {
+  background-color: pink;
+  padding: 15px;
+  margin-top: 20px;
+}
+</style>
+

20_脚手架/vue_code/src/components/TodoBottom.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="todo-bottom" v-show="total">
-    <label>
-      <input type="checkbox" v-model="isAll">
-    </label>
-    <span>
-      <span>已完成{{ totalDone }}</span>/全部{{ total }}
-    </span>
-    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TodoBottom",
-  props: ['todos', 'checkAllTodo', 'clearAllTodo'],
-  computed: {
-    // 用于计算全部todo任务的总数量，并且通过v-show绑定到模板，用于控制模板的展示
-    total() {
-      return this.todos.length
-    },
-    // 用于统计全部已完成的todo任务数量
-    totalDone() {
-      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
-    },
-    // 计算方法的完整写法
-    // get方法用于判断是否全部任务被勾选， 返回布尔值
-    // set方法是封装了App中checkAllTodo方法用于勾选和取消勾选全部任务
-    isAll: {
-      get() {
-        return this.totalDone === this.total && this.total > 0
-      },
-      set(value) {
-        this.checkAllTodo(value)
-      }
-    }
-  },
-  methods: {
-    // 封装App中的clearAllTodo方法，用于清除全部已完成数据
-    clearAll() {
-      if (confirm("确认清除全部已完成任务？")) {
-        this.clearAllTodo()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.todo-bottom {
-  height: 40px;
-  line-height: 40px;
-  padding-left: 6px;
-  margin-top: 5px;
-}
-
-.todo-bottom label {
-  display: inline-block;
-  margin-right: 20px;
-  cursor: pointer;
-}
-
-.todo-bottom label input {
-  position: relative;
-  top: -1px;
-  vertical-align: middle;
-  margin-right: 5px;
-}
-
-.todo-bottom button {
-  float: right;
-  margin-top: 5px;
-}
-</style>

20_脚手架/vue_code/src/components/TodoHeader.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="todo-header">
-    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add">
-  </div>
-</template>
-
-<script>
-import {nanoid} from "nanoid"
-
-export default {
-  name: "TodoHeader",
-  props: ['addTodo'],
-  data() {
-    // 初始化title已显示placeholder内容
-    return {
-      title: ''
-    }
-  },
-  methods: {
-    // 添加todo任务，trim用户输入数据后判断是否为空，如果内容正常则生成任务的对象数据
-    // 将任务的对象数据回写到App中的todo中
-    add() {
-      if (!this.title.trim()) return alert("输入不能为空")
-      const todoObj = {id: nanoid(), title: this.title, done: false}
-      this.addTodo(todoObj)
-      this.title = ''
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-.todo-header input {
-  width: 560px;
-  height: 28px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 4px 7px;
-}
-
-.todo-header input:focus {
-  outline: none;
-  border-color: rgba(82, 168, 236, 0.8);
-  box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-</style>

20_脚手架/vue_code/src/components/TodoItem.vue

@@ -1,74 +0,0 @@
-<template>
-  <li>
-    <label>
-      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
-      <span>{{ todo.title }}</span>
-    </label>
-    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
-  </li>
-</template>
-
-<script>
-export default {
-  name: "TodoItem",
-  // 从todoList中接收数据todos和函数checkTodo、deleteTodo
-  props: ['todo', 'checkTodo', 'deleteTodo'],
-  methods: {
-    // 将接收的checkTodo重新封装后才能在TodoItem中被调用
-    handleCheck(id) {
-      this.checkTodo(id)
-    },
-    // 将接收的deleteTodo重新封装后才能在TodoItem中被调用
-    handleDelete(id) {
-      if (confirm("确认删除？")) {
-        this.deleteTodo(id)
-      }
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-li {
-  list-style: none;
-  height: 36px;
-  line-height: 36px;
-  padding: 0 5px;
-  border-bottom: 1px solid #ddd;
-}
-
-li label {
-  float: left;
-  cursor: pointer;
-}
-
-li label input {
-  vertical-align: middle;
-  margin-right: 6px;
-  position: relative;
-  top: -1px;
-}
-
-li button {
-  float: right;
-  display: none;
-  margin-top: 3px;
-}
-
-li:before {
-  content: initial;
-}
-
-li:last-child {
-  border-bottom: none;
-}
-
-li:hover {
-  background-color: #ddd;
-}
-
-li:hover button {
-  display: block;
-}
-</style>

20_脚手架/vue_code/src/components/TodoList.vue

@@ -1,41 +0,0 @@
-<template>
-  <ul class="todo-list">
-    <TodoItem
-        v-for="todoObj in todos"
-        :key="todoObj.id"
-        :todo="todoObj"
-        :checkTodo="checkTodo"
-        :deleteTodo="deleteTodo"
-    />
-  </ul>
-</template>
-
-<script>
-import TodoItem from "@/components/TodoItem.vue";
-
-export default {
-  name: "TodoList",
-  // 嵌套了子组件TodoItem
-  components: {TodoItem},
-  // 从App中接收数据todos和函数checkTodo、deleteTodo，直接转发给todoItem组件，起到了bypass作用
-  props: ['todos', 'checkTodo', 'deleteTodo']
-}
-</script>
-
-<style scoped>
-.todo-list {
-  margin-left: 0px;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  padding: 0px;
-}
-
-.todo-empty {
-  height: 40px;
-  line-height: 40px;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  padding-left: 5px;
-  margin-top: 10px;
-}
-</style>