栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Vue--mixin(混入)--使用/教程/实例

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue--mixin(混入)--使用/教程/实例

原文网址:Vue--mixin(混入)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文用示例介绍Vue的mixin(mixins)的用法。

        mixin中文为:混入。

官网

混入 — Vue.js

mixin简介

        Mixin是一种更好的复用代码的模式。java , Object C 中的 interface , implements, extends 等关键字的意义,就是为了让代码可以复用、继承。同样的,在vue中,用mixin来实现可复用。

        Mixin 实际上是利用语言的特性(关键字),以更加简洁易懂的方式,实现了 “设计模式”中的 “组合模式”。 可以定义一个公共的类,这个类就叫做”mixin”。然后让其他的类,通过“include” 语言特性包含mixin,直接具备了 mixin 所具备的各种方法、数据等。

示例

src/mixins/SayHello.js

export default {
  data() {
    return {
      mixinName: "SayHello.js"
    }
  },
  methods: {
    sayHello(name){
      return "hello," + name;
    }
  }
}

src/components/CompA.vue







 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

测试

访问:http://localhost:8080/#/compA

其他网址

Vue混合mixins - 小火柴的蓝色理想 - 博客园

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/703575.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号