vue學習（十）mixin 偷懶

時間 2021-08-13

標籤 app ide this spa component console class cli 简体版

原文原文鏈接

一 mixin混入偷懶技術

架子app

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

<script>

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

mixin偷懶ide

<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>

咱們不只能夠偷懶數據也能夠偷懶方法this

<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混入技術應用

最早開始的架子spa

<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>

咱們能夠發現上面的模態框和提示框有重複的代碼component

提取ip

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

總體代碼it

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。