zoukankan      html  css  js  c++  java
  • 685 vue3 mixin,extends

    认识Mixin


    Mixin的基本使用


    Mixin的合并规则


    全局混入Mixin


    extends


    import { createApp } from 'vue';
    import App from './01_mixin和extends/App.vue';
    // import App from './02_compositionAPI基础/App.vue';
    
    const app = createApp(App);
    
    // 全局混入Mixin
    app.mixin({
      data() {
        return {}
      },
      created() {
        console.log("全局的created生命周期");
      }
    });
    
    app.mount("#app");
    

    App.vue

    <template>
      <div>
        <home />
      </div>
    </template>
    
    <script>
      import Home from "./pages/Home.vue";
    
      export default {
        components: {
          Home,
        },
      };
    </script>
    
    <style scoped></style>
    

    01_mixin基本使用.vue

    <template>
      <div>
        <h2>{{ message }}</h2>
        <button @click="foo">按钮</button>
      </div>
    </template>
    
    <script>
      import { demoMixin } from "./mixins/demoMixin";
    
      export default {
        mixins: [demoMixin],
        data() {
          return {
            title: "Hello World",
          };
        },
        methods: {},
      };
    </script>
    
    <style scoped></style>
    

    02_mixin合并规则.vue

    <template>
      <div>
        <h2>{{ message }}</h2>
        <button @click="foo">foo</button>
      </div>
    </template>
    
    <script>
      import { demoMixin } from "./mixins/demoMixin";
    
      export default {
        mixins: [demoMixin],
        data() {
          return {
            title: "Hello World",
            message: "Hello App",
          };
        },
        methods: {
          foo() {
            console.log("app foo");
          },
        },
        computed: {},
        watch: {},
        created() {
          console.log("App created 执行");
        },
      };
    </script>
    
    <style scoped></style>
    

    demoMixin.js

    export const demoMixin = {
      data() {
        return {
          message: "Hello DemoMixin"
        }
      },
      methods: {
        foo() {
          console.log("demo mixin foo");
        }
      },
      created() {
        console.log("执行了demo mixin created");
      }
    }
    

    Home.vue

    <template>
      <div>
        Home Page
        <h2>{{ title }}</h2>
        <button @click="bar">按钮</button>
      </div>
    </template>
    
    <script>
      import BasePage from "./BasePage.vue";
    
      export default {
        extends: [BasePage],
        data() {
          return {
            content: "Hello Home",
          };
        },
      };
    </script>
    
    <style scoped></style>
    

    BasePage.vue

    <template>
      <div>
        <h2>哈哈哈哈啊</h2>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            title: "Hello Page",
          };
        },
        methods: {
          bar() {
            console.log("base page bar");
          },
        },
      };
    </script>
    
    <style scoped></style>
    

  • 相关阅读:
    RTP 时间戳的处理
    Linux下printf输出字体的特效
    C# 获取空闲端口及查看已用端口
    Linux C :遍历输出指定目录下的所有文件
    RTP视频传输播放延时(时间戳)
    Linux 写SD卡时数据异常
    WIN7 C# System.Runtime.InteropServices.COMException VLC HRESULT:0x80040154 (REGDB_E_CLASSNOTREG)
    oracle分布式处理时报“ORA02041: 客户数据库未开始一个事务处理”解决办法 z
    js文件封装javascript在html中获取url参数
    Windows 7 和Windows 2008R2中的IIS7.5 z
  • 原文地址:https://www.cnblogs.com/jianjie/p/14900066.html
Copyright © 2011-2022 走看看