vue之mixin混入偷懒技术

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

mixin分发vue组件中的可复用功能

<!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>mixin的应用</title>
</head>
<body>
    <div id='app'>
    </div>
    <script src="./vue.js"></script>
    <script>
        //    一个是模态框 一个提示框
        // 它们看起来不一样，用法不一样，但是逻辑一样（切换boolean）
        /* 
        // 全局的mixin 要格外小心 因为每个组件实例创建是，它都会被调用
        Vue.mixin({
        })
         */
        const toggleShow = {
            data() {
                return {
                    isShow: false
                }
            },
            methods: {
                toggleShow() {
                    this.isShow = !this.isShow
                }
            }
        }
        const Modal = {
            template: `
                <div v-if='isShow'><h3>模态框组件</h3></div>
            `,
            // 局部的mixin
            mixins: [toggleShow]
        }
        const ToolTip = {
            template: `
            <div v-if='isShow'>
                <h2>提示框组件</h2>
            </div>
         `,
            mixins: [toggleShow]
        }
        new Vue({
            el: "#app",
            data: {
            },
            components: {
                Modal,
                ToolTip
            },
            template: `
                <div>
                    <button @click='handleModel'>模态框</button>
                    <button @click='handleToolTip'>提示框</button>
                    <Modal ref='modal'></Modal>
                    <ToolTip ref='toolTip'></ToolTip>
                </div>
            `,
            methods: {
                handleModel() {
                    this.$refs.modal.toggleShow();
                },
                handleToolTip() {
                    this.$refs.toolTip.toggleShow();
                }
            },
        })
    </script>
</body>
</html>

以上是 vue之mixin混入偷懒技术 的全部内容， 来源链接： utcz.com/z/380090.html

回到顶部