订阅事件学习

20_脚手架/vue_code/12.src_todolist全局事件总线/App.vue

@@ -0,0 +1,128 @@
+<template>
+  <div id="root">
+    <div class="todo-container">
+      <div class="todo-wrap">
+        <TodoHeader @addTodo="addTodo"/>
+        <TodoList :todos="todos"/>
+        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoBottom from "./components/TodoBottom.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    TodoHeader,
+    TodoList,
+    TodoBottom
+  },
+  data() {
+    return {
+      // 预置测试数据
+      todos: JSON.parse(localStorage.getItem('todos')) || []
+    }
+  },
+  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
+  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
+  methods: {
+    // 添加todo任务，绑定到TodoHeader中
+    addTodo(todoObj) {
+      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)
+    },
+
+    // 清除全部已完成的todo任务，绑定到TodoBottom中
+    clearAllTodo() {
+      this.todos = this.todos.filter((todo) => {
+        return !todo.done
+      })
+    }
+  },
+  watch: {
+    todos: {
+      deep: true,
+      handler(value) {
+        localStorage.setItem('todos', JSON.stringify(value))
+      }
+    }
+  },
+  // 生成全局事件总线
+  mounted() {
+    this.$bus.$on('checkTodo', this.checkTodo)
+    this.$bus.$on('deleteTodo', this.deleteTodo)
+  },
+  // 销毁全局事件总线
+  beforeDestroy() {
+    this.$bus.$off('checkTodo')
+    this.$bus.$off('deleteTodo')
+  }
+}
+</script>
+
+<style>
+body {
+  background: #fff;
+}
+
+.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/12.src_todolist全局事件总线/main.js

@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

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

@@ -1,128 +1,32 @@
 <template>
-  <div id="root">
-    <div class="todo-container">
-      <div class="todo-wrap">
-        <TodoHeader @addTodo="addTodo"/>
-        <TodoList :todos="todos"/>
-        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
-      </div>
-    </div>
+  <div class="app">
+    <h1>{{ msg }}</h1>
+    <School/>
+    <Student/>
   </div>
 </template>
 
 <script>
-import TodoHeader from "./components/TodoHeader.vue";
-import TodoList from "./components/TodoList.vue";
-import TodoBottom from "./components/TodoBottom.vue";
-
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
 
 export default {
   name: "App",
   components: {
-    TodoHeader,
-    TodoList,
-    TodoBottom
+    School,
+    Student
   },
   data() {
     return {
-      // 预置测试数据
-      todos: JSON.parse(localStorage.getItem('todos')) || []
-    }
-  },
-  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
-  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
-  methods: {
-    // 添加todo任务，绑定到TodoHeader中
-    addTodo(todoObj) {
-      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)
-    },
-
-    // 清除全部已完成的todo任务，绑定到TodoBottom中
-    clearAllTodo() {
-      this.todos = this.todos.filter((todo) => {
-        return !todo.done
-      })
-    }
-  },
-  watch: {
-    todos: {
-      deep: true,
-      handler(value) {
-        localStorage.setItem('todos', JSON.stringify(value))
-      }
+      msg: "Hello:",
     }
-  },
-  // 生成全局事件总线
-  mounted() {
-    this.$bus.$on('checkTodo', this.checkTodo)
-    this.$bus.$on('deleteTodo', this.deleteTodo)
-  },
-  // 销毁全局事件总线
-  beforeDestroy() {
-    this.$bus.$off('checkTodo')
-    this.$bus.$off('deleteTodo')
   }
 }
 </script>
 
 <style>
-body {
-  background: #fff;
-}
-
-.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;
+.app {
+  background-color: gray;
+  padding: 15px
 }
 </style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+    }
+  },
+  methods: {
+    subMethod(msgName, data) {
+      console.log('School发布了hello消息，hello消息的回调被执行了', data)
+    }
+  },
+  mounted() {
+    // this.$bus.$on('hello', (data)=>{
+    //   console.log('这是School组件，收到了数据', data)
+    // })
+
+    // 使用订阅方式实现
+    // this.pubId = pubsub.subscribe('hello', (msgName, data) => {
+    //   console.log('School发布了hello消息，hello消息的回调被执行了', data)
+    // })
+    this.pubId = pubsub.subscribe('hello', this.subMethod)
+  },
+  beforeDestroy() {
+    // this.$bus.off('hello')
+    pubsub.unsubscribe(this.pubId)
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: skyblue;
+  padding: 15px
+}
+</style>
+

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="student">
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+    <button @click="sendStudentName">发送数据给School组件</button>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18
+    }
+  },
+  methods:{
+    sendStudentName() {
+      // this.$bus.$emit('hello', this.name)
+      pubsub.publish('hello', 666)
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.student {
+  background-color: pink;
+  padding: 15px;
+  margin-top: 20px;
+}
+</style>
+