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>
    

  • 相关阅读:
    Eclispe造成的tomcat占用端口 无法启动 强制终止进程 转载
    JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载
    spket IDE插件更新地址
    SQL 语句外键 a foreign key constraint fails
    面试技能树 转载
    简单粗暴 每个servlet之前都插入一段代码解决 乱码问题
    记录一个因sqlmap导致的错误
    Java与数据库数据类型对应表
    乐观锁与悲观锁
    maven打的包中含源文件jar包
  • 原文地址:https://www.cnblogs.com/jianjie/p/14900066.html
Copyright © 2011-2022 走看看