混入可以将不同组件的共同内容部分在一个混入对象中展示,然后通过在组件实例中混入这个对象,这样拥有这些属性的组件都可以调用 混入对象中的属性名跟组件中的属性名冲突时,以组件自身的为基准 个人理解就是把所有实例组件相同的data,methods等放到一个公共对象中去调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app1">{{Title}}</div> <div id="app2">{{Foo}}</div> </body> </html> <script> let mymixin = { data: function () { return { Title: 'Hello World', Foo: '你好,世界' } } } let app1 = new Vue({ // 混入 mixins: [mymixin], el: '#app1' }) let app2 = new Vue({ // 混入 mixins: [mymixin], el: '#app2' }) </script>最终页面展示的结果:
Hello World 你好,世界转载于:https://www.cnblogs.com/zjh-study/p/10736517.html