vue学习（十）mixin 偷懒

一 mixin混入偷懒技术#

架子

<div id="app">
    {{msg}}
</div>

<script>

    let app = new Vue({
        el:'#app',
        data:{
            msg:'晓强'
        },
    })
</script>

mixin偷懒

<div id="app">
    {{msg}}　　　　　　　　　　　　// 我在这就是想看 msg 的内容 所以 需要 mixin 就可以啦
</div>

<script>

    const myMixin={
        data(){
            return{
                msg:'myMixin偷懒'
            }
        }
    };


    let app = new Vue({
        el:'#app',
        data:{
            title:'晓强'
        },
        mixins : [myMixin]
    })
</script>

我们不仅可以偷懒数据也可以偷懒方法

<div id="app">
    {{msg}}
</div>

<script>

    const myMixin={
        data(){
            return{
                msg:'myMixin偷懒'
            }
        },
        created(){
            this.SayHello();
        },
        methods:{
            SayHello(){
                console.log('hello')
            }
        }
    };


    let app = new Vue({
        el:'#app',
        data:{
            title:'晓强'　　　　　　　　//  如果这个是 msg 就显示的是晓强
        },
        mixins : [myMixin]
    })
</script>

二mixin混入技术应用 #

最先开始的架子

<div id="app">
    {{msg}}
</div>

<script>
    // 模态框
    const Modal={
        template:`<div v-if="isShow"><h3>模态框组件</h3></div>`,
        data(){
            return{
                isShow:false
            }
        },
        methods:{
            toggleShow(){
                this.isShow = !this.isShow
            }
        }
    };
    
    // 提示框
    const Tooltip={
        template:`<div v-if="isShow"><h2>提示框组件</h2></div>`,
        data(){
            return{
                isShow:false
            }
        },
        methods:{
            toggleShow(){
                this.isShow = !this.isShow
            }
        }
    };
    let app=new Vue({
        el:'#app',
        data:{
            msg:'mixin'
        }
    })
</script>

我们可以发现上面的模态框和提示框有重复的代码

提取

const toggleShow = {
        data() {
            return {
                isShow: false
            }
        },
        methods: {
            toggleShow() {
                this.isShow = !this.isShow
            }
        }
    };

整体代码

<body>
<!--一个是模态框 一个是提示框 被弹出-->
<!--他们两个看起来不一样 用法不一样 但是逻辑是一样的（切换boolean）-->

<div id="app">
    {{msg}}
</div>

<script>
    /*
    * 全局的mixin要格外小心 因为每个组件实例创建时都会被调用
    * Vue.mixin({
    *       data(){
    *
    *       }
    * })
    * */
    const toggleShow = {
        data() {
            return {
                isShow: false
            }
        },
        methods: {
            toggleShow() {
                this.isShow = !this.isShow
            }
        }
    };


    // 模态框
    const Modal = {
        template: `<div v-if="isShow"><h3>模态框组件</h3></div>`,
        mixins: [toggleShow]
    };

    // 提示框
    const Tooltip = {
        template: `<div v-if="isShow"><h2>提示框组件</h2></div>`,
        mixins: [toggleShow]

    };
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'mixin'
        },
        components: {
            Modal,
            Tooltip
        },
        template: `

        <div>
            <Modal ref="motai"></Modal>
            <Tooltip ref="tooltip"></Tooltip>
            <button @click="handleModel">模态框</button>
            <button @click="handleTooltip">提示框</button>
        </div>
        `,
        methods: {
            handleModel() {
                this.$refs.motai.toggleShow()
            },
             handleTooltip() {
                this.$refs.tooltip.toggleShow()
        }
        },

    })
</script>