Vue心得2022-2

前言

繼 Vue心得2022 ，因為文章太長不好找內容，所以拆出來 

mixins

https://v2.cn.vuejs.org/v2/guide/mixins.html  混入

https://juejin.cn/post/7076340796361801759  彻底搞懂Vue中的Mixin混入（保姆级教程）

diff --git a/src/mixin/index.js b/src/mixin/index.js
new file mode 100644
index 0000000..80b67fc
--- /dev/null
+++ b/src/mixin/index.js
@@ -0,0 +1,23 @@
+export const mixins = {
+  data () {
+    return {
+      msg: '我是小猪课堂'
+    }
+  },
+  computed: {},
+  created () {
+    console.log('我是mixin中的created生命周期函数')
+  },
+  mounted () {
+    console.log('我是mixin中的mounted生命周期函数')
+  },
+  methods: {
+    clickMe () {
+      console.log('我是mixin中的点击事件')
+      this.clickMe2()
+    },
+    clickMe2 () {
+      console.log('我是mixin中的clickMe2')
+    }
+  }
+}
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 6664fb9..e690975 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -63,14 +63,15 @@
+    <button @click="clickMe">点击我</button>
   </div>
 </template>
 
@@ -80,6 +81,7 @@ import store from '@/store'
 import { mapGetters } from 'vuex'
 import _ from 'lodash'
 import ModalComponent from '@/components/ModalComponent'
+import { mixins } from '@/mixin'
 
 export default {
   name: 'TestView',
@@ -87,6 +89,7 @@ export default {
     ChildComponent,
     ModalComponent
   },
+  mixins: [mixins],
   data () {
     return {
       singleObj: {
@@ -119,12 +122,19 @@ export default {
   },
+  created () {
+    console.log('我是组件的created调用mixin数据', this.msg)
+  },
+  mounted () {
+    console.log('我是组件的mounted生命周期函数')
   },
   methods: {
+    clickMe2 () {
+      console.log('我是组件的clickMe2')
+    },
     callMe (count) {
       console.log(count)
       this.parentCount = count

s

結果

我是mixin中的created生命周期函数  - 先呼叫mixin的created

我是组件的created调用mixin数据 我是小猪课堂

我是mixin中的mounted生命周期函数  - 先呼叫mounted的created

我是组件的mounted生命周期函数

我是mixin中的点击事件

我是组件的clickMe2  - 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。