vue2

8.vue/高阶/project2/src/App.vue

@@ -1,47 +1,82 @@
 <template>
   <div>
-    <h1>
       APP
       <Demo1 ref="aaa"></Demo1>
       <Demo2 :age1="3"></Demo2>
       <Demo3 @getName="getName1"></Demo3>
       <Demo4></Demo4>
       <Demo5></Demo5>
-    </h1>
+      <Demo6>瑶一瑶</Demo6>
+      <Demo7>
+        <template v-slot:header>
+          <p>瑶一瑶</p>
+        </template>
+        <template #neck>
+          <h4>杨金刚</h4>
+        </template>
+        <template #default>
+          <h5>杨水珍</h5>
+        </template>
+      </Demo7>
+      <Demo8>
+        <template v-slot="data">
+          {{ data.obj1.address }}
+        </template>
+      </Demo8>
+      <Demo9 title="杨金刚">
+        <template v-slot:header>今天星期四</template>
+        <template v-slot:footer="data">
+          <ul>
+            <li v-for="(item,index) in data.holiday1" :key="index">
+              {{ item }}
+            </li>
+          </ul>
+        </template>
+      </Demo9>
   </div>
 </template>
 
 <script>
-import Demo1 from './components/Demo1.vue';
-import Demo2 from './components/Demo2.vue';
-import Demo3 from './components/Demo3.vue';
-import Demo4 from './components/Demo4.vue';
-import Demo5 from './components/Demo5.vue';
+import Demo1 from "./components/Demo1.vue";
+import Demo2 from "./components/Demo2.vue";
+import Demo3 from "./components/Demo3.vue";
+import Demo4 from "./components/Demo4.vue";
+import Demo5 from "./components/Demo5.vue";
+import Demo6 from "./components/Demo6.vue";
+import Demo7 from "./components/Demo7.vue";
+import Demo8 from "./components/Demo8.vue";
+import Demo9 from "./components/Demo9.vue";
 export default {
   components: {
     Demo1,
     Demo2,
     Demo3,
     Demo4,
-    Demo5
+    Demo5,
+    Demo6,
+    Demo7,
+    Demo8,
+    Demo9
   },
-  methods:{
+  created() {
+    // this.showMain()
+  },
+  methods: {
     getMain() {
-      console.log("端午节")
+      console.log("端午节");
     },
     getName1(name) {
-      console.log("你好" + name)
+      console.log("你好" + name);
     }
   },
   mounted() {
     // 绑定
     // this.$refs.名字.$on('事件名称',触发的方法)
-    this.$refs.aaa.$on('flower',this.getMain)
+    this.$refs.aaa.$on("flower", this.getMain);
     // console.log(,'121')
   }
-}
+};
 </script>
 
 <style>
-
 </style>

8.vue/高阶/project2/src/components/Demo4.vue

@@ -11,17 +11,19 @@ import pubsub from 'pubsub-js';
 export default {
     mounted() {
         // 发布
-      this.pubId =  pubsub.subscribe("part1",this.weather)
+        this.$bus.$on("part1",this.weather)
+      // this.pubId =  pubsub.subscribe("part1",this.weather)
     },
     methods:{
-        weather(name1,address) {
-            console.log(name1,address)
+        weather(address) {
+            console.log(address)
             console.log('今天30度'+ address)
         }
     },
     // 取消订阅
     beforeDestoryed() {
-        pubsub.unsubscribe(this.pubId)
+        // pubsub.unsubscribe(this.pubId)
+        this.$bus.$off()
     }
 };
 </script>

8.vue/高阶/project2/src/components/Demo5.vue

@@ -12,7 +12,8 @@ export default {
     methods:{
         getMsg() {
             // 订阅
-            pubsub.publish('part1','哈尔滨')
+            // pubsub.publish('part1','哈尔滨')
+            this.$bus.$emit("part1",'北京')
         }
     }
 };

8.vue/高阶/project2/src/components/Demo6.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo6">
+    <h3>Demo6</h3>
+    <p>今天天气真好</p>
+    <slot>默认值</slot>
+    <p>后天端午节</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+div {
+  width: 80%;
+  height: 200px;
+  font-size: 20px;
+  border: 3px solid rgb(39, 24, 176);
+}
+</style>

8.vue/高阶/project2/src/components/Demo7.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo6">
+    <h3>Demo7</h3>
+    <slot>默认值1</slot>
+    <p>今天天气真好</p>
+    <slot name="header">默认值2</slot>
+    <p>后天端午节</p>
+    <slot name="neck">默认值3</slot>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+div {
+  width: 80%;
+  height: 300px;
+  font-size: 20px;
+  border: 3px solid rgb(77, 233, 25);
+}
+</style>

8.vue/高阶/project2/src/components/Demo8.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo8">
+    <h3>Demo8</h3>
+    <p>今天天气真好</p>
+    <slot :obj1="obj">{{ obj.name }}</slot>
+    <p>后天端午节</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      obj: {
+        name:"图图",
+        address:"翻斗花园"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+div {
+  width: 80%;
+  height: 400px;
+  font-size: 20px;
+  border: 3px solid rgb(238, 178, 38);
+}
+</style>

8.vue/高阶/project2/src/components/Demo9.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo9">
+    <h3>Demo9--{{ title }}</h3>
+    <slot name="header"></slot>
+    <p>今天天气真好</p>
+    <slot name="footer" :holiday1="holiday">节假</slot>
+    <p>后天端午节</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['title'],
+  data() {
+    return {
+      obj: {
+        name:"图图",
+        address:"翻斗花园"
+      },
+      holiday:['端午','中秋','国庆','元旦','春节']
+    }
+  }
+}
+</script>
+
+<style scoped>
+div {
+  width: 80%;
+  height: 400px;
+  font-size: 20px;
+  border: 3px solid rgb(15, 223, 167);
+}
+</style>

8.vue/高阶/project2/src/main.js

@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+// import {mixin} from './utils/mixin'
 Vue.config.productionTip = false
-
+// Vue.mixin(mixin)
 new Vue({
   render: h => h(App),
+  // 全局事件总线
+  beforeCreate() {
+    Vue.prototype.$bus = this;  
+  }
 }).$mount('#app')

8.vue/高阶/project2/src/utils/mixin.js

@@ -0,0 +1,10 @@
+export const mixin = {
+    methods:{
+        showMain() {
+            alert('你好')
+        }
+    },
+    mounted() {
+        console.log("挂载")
+    }
+}