完成props的学习

20_脚手架/vue_code/03.src_mixin混入/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  }
+}
+</script>

20_脚手架/vue_code/03.src_mixin混入/components/School.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2 @click="showName">学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+// 局部混合
+// import {mixin_method1, mixin_method2} from "@/mixin";
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+      msg: "欢迎学校"  // 以vc内数据为准
+    }
+  },
+  mounted() {
+    console.log("欢迎学校")  // mixin和vc内的都要执行
+  },
+  // 局部混合
+  // mixins: [mixin_method1, mixin_method2]
+}
+</script>
+

20_脚手架/vue_code/03.src_mixin混入/components/Student.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2 @click="showName">学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+  </div>
+</template>
+
+<script>
+// 局部混合
+// import {mixin_method1, mixin_method2} from "../mixin";
+
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18,
+      msg: "欢迎学生"
+    }
+  },
+  mounted() {
+    console.log("欢迎学生")
+  },
+  // 局部混合
+  // mixins: [mixin_method1, mixin_method2]
+}
+</script>
+

20_脚手架/vue_code/03.src_mixin混入/main.js

@@ -0,0 +1,16 @@
+import Vue from "vue";
+import App from "./App";
+
+import {mixin_method1, mixin_method2} from "@/mixin";
+
+
+Vue.config.productionTip = false
+Vue.mixin(mixin_method1)
+Vue.mixin(mixin_method2)
+
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')

20_脚手架/vue_code/03.src_mixin混入/mixin.js

@@ -0,0 +1,17 @@
+export const mixin_method1 = {
+    methods: {
+        showName() {
+            alert(this.name)
+        }
+    },
+    mounted() {
+        console.log("欢迎")
+    }
+}
+export const mixin_method2 = {
+    data() {
+        return {
+            msg: "欢迎"
+        }
+    }
+}

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

@@ -1,15 +1,19 @@
 <template>
   <div>
-    <Student name="小强" sex="男" :age="18"/>
+    <School/>
+    <Student/>
   </div>
 </template>
 
 <script>
+import School from "./components/School.vue";
 import Student from "./components/Student.vue";
 
+
 export default {
   name: "App",
   components: {
+    School,
     Student
   }
 }

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2 @click="showName">学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+// 局部混合
+// import {mixin_method1, mixin_method2} from "@/mixin";
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+      msg: "欢迎学校"  // 以vc内数据为准
+    }
+  },
+  mounted() {
+    console.log("欢迎学校")  // mixin和vc内的都要执行
+  },
+  // 局部混合
+  // mixins: [mixin_method1, mixin_method2]
+}
+</script>
+

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

@@ -1,53 +1,28 @@
 <template>
   <div>
-    <h1>{{ msg }}</h1>
-    <h2>学生名称：{{ name }}</h2>
-    <h2>学生性别：{{ sex }}</h2>
-    <h2>学生年龄：{{ localAge + 1 }}</h2>
-    <button @click="changeAge">点击年龄+1</button>
+    <h2 @click="showName">学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
   </div>
 </template>
 
 <script>
+// 局部混合
+// import {mixin_method1, mixin_method2} from "../mixin";
+
 export default {
   name: "Student",
   data() {
     return {
-      msg: "欢迎",
-      localAge: this.age
+      name: "小强",
+      age: 18,
+      msg: "欢迎学生"
     }
   },
-  methods: {
-    changeAge() {
-      this.localAge++
-    }
+  mounted() {
+    console.log("欢迎学生")
   },
-
-  // 数组形式
-  // props: ['name', 'age', 'sex']
-
-  // 简单对象形式(限定数据类型)
-  // props: {
-  //   name: String,
-  //   age: Number,
-  //   sex: String
-  // }
-
-  //  完全对象形式
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    age: {
-      type: Number,
-      default: 99
-    },
-    sex: {
-      type: String,
-      required: true
-    }
-  }
+  // 局部混合
+  // mixins: [mixin_method1, mixin_method2]
 }
 </script>
 

20_脚手架/vue_code/src/main.js

@@ -1,6 +1,13 @@
 import Vue from "vue";
 import App from "./App";
 
+import {mixin_method1, mixin_method2} from "@/mixin";
+
+
+Vue.config.productionTip = false
+Vue.mixin(mixin_method1)
+Vue.mixin(mixin_method2)
+
 new Vue({
     components: {
         App

20_脚手架/vue_code/src/mixin.js

@@ -0,0 +1,17 @@
+export const mixin_method1 = {
+    methods: {
+        showName() {
+            alert(this.name)
+        }
+    },
+    mounted() {
+        console.log("欢迎")
+    }
+}
+export const mixin_method2 = {
+    data() {
+        return {
+            msg: "欢迎"
+        }
+    }
+}