zoukankan      html  css  js  c++  java
  • 440 vue混入mixins

    混入:把多个组件中,公共的代码抽取,如data、methods、生命周期钩子,然后使用mixins继承。
    

    01-混入mixin.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    
    <body>
        <!-- 
            混入 mixin  => js混入式继承
            作用 : 共享功能
            混入对象: data、methods......
        -->
        <div id="app">
            <one></one>
            <two></two>
        </div>
    
        <script src="./vue.js"></script>
        <script>
            // 准备一个混入对象
            const hello = {
                methods: {
                    sayHello() {
                        console.log('大家好, 我系' + this.name)
                    }
                }
            }
    
            Vue.component('one', {
                mixins: [hello],
                data() {
                    return {
                        name: '春'
                    }
                },
                template: `<div @click='sayHello'> 子组件 one  :  </div>`
            })
    
            Vue.component('two', {
                mixins: [hello],
                data() {
                    return {
                        name: '马'
                    }
                },
                template: `<div @click='sayHello'> 子组件  two:  </div>`
            })
    
            const vm = new Vue({
                el: '#app',
                data: {}
            })
        </script>
    </body>
    
    </html>
    

    02-混入-重名.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    
    <body>
        <!-- 
            混入 mixin   => js => 混入式继承
            作用 : 共享功能
            混入对象 ( data methods ,,,,)
          -->
        <div id="app">
            <one></one>
            <two></two>
        </div>
        <script src="./vue.js"></script>
        <script>
            // 准备一个混入对象
            const hi = {
                methods: {
                    sayHello() {
                        console.log('大家好,我系' + this.name)
                    }
                }
            }
    
            Vue.component('one', {
                // 【就这个例子来说,没必要把 hi混入进来,因为hi里面只有一个sayHello方法,而这个组件里自己写了sayHello方法】
                mixins: [hi],
                data() {
                    return {
                        name: '春'
                    }
                },
                template: `<div @click='sayHello'> 子组件 one  :  </div>`,
                // 【混入的属性可以和组件的属性重复,两者会合并】
                methods: {
                    // (1)自己组件内部有同名的方法时,就执行自己的方法;(2)需要mixins的的方法,就继承,不需要就重写
                    sayHello() {
                        console.log('测试')
                    }
                }
            })
    
            Vue.component('two', {
                mixins: [hi],
                data() {
                    return {
                        name: '马'
                    }
                },
                template: `<div @click='sayHello'> 子组件  two:  </div>`
            })
    
            const vm = new Vue({
                el: '#app',
                data: {}
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    开发新手最容易犯的50个 Ruby on Rails 错误(1)
    Spring Data Redis 让 NoSQL 快如闪电(2)
    为什么每个程序员都应该懂点前端知识?
    如何在 Flickr 上找到又酷,又有趣,且版权自由的照片?
    微服务扩展新途径:Messaging
    为什么现代企业无法真正实现组合式监控?
    开发者和程序员需要关注的42个播客
    战略性情绪分析的5大数据来源
    Spring Data Redis 让 NoSQL 快如闪电 (1)
    对抗告警疲劳的8种方法
  • 原文地址:https://www.cnblogs.com/jianjie/p/12691024.html
Copyright © 2011-2022 走看看