main(调用一个公共组件)
app.vue
<template>
<div>
<Student/>
<School></School>
</div>
</template>
<!--
1.作用(mixin):将多个组件内相同的方法提取到一个混合对象
2.如何使用:
全局使用:在main.js中进行使用:
import {混合变量名} from './maxin.js'
Vue.mixin(混合变量名)
局部使用:在Student/School中进行使用:
import {maxin} from '../maxin.js'
mixins:[变量名]
-->
<script>
import Student from './components/Student'
import School from './components/School'
export default{
name:'App',
components:{Student,School}
} </script> <style>
</style>
student.vue
<template>
<div>
<h3>学校名称:{{name}}</h3>
<button @click="show">点我,提示学生姓名</button>
</div>
</template> <script>
// import {maxin} from '../maxin.js'
export default { name:'School',
data(){
return{
name:'渲染学校'
}
},
// mixins:[maxin]
}
</script> <style>
</style>
scholl.vue
<template>
<div>
<h3>学生姓名:{{name}}</h3>
<button @click="show">点我,提示学生姓名</button>
</div>
</template>
<!-- -->
<script>
//局部混合
// import {maxin} from '../maxin.js'
export default {
name:'Student',
data(){
return {
name:'wei'
}
},
//mixins:[变量名]
// mixins:[maxin]
}
</script> <style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
//全局混合
import {maxin} from './maxin.js'
Vue.mixin(maxin)
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h => h(App)
})
maxin.js
export const maxin = {
methods:{
show(){
alert(this.name)
}
}
}
main(调用一个公共组件)的更多相关文章
- 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式
表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
公共组件: <template> <div> <div class="upload-box"> <div class="imag ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- .Net调用Office Com组件的原理及问题检索com类工厂组件检索 COM 类工厂中 CLSID 为 {XXX} 的组件失败
我是在本地32位操作系统+vs2010+office2007做创建并下载Excel,ppt文件的操作没有问题,发布到64位系统的服务器上报错,最开始报错:: 1:Retrieving the COM ...
- 把iview中的table组件写成了一个公用组件,在另一个组件里去引用它的时候rander函数里的this指向不正确
在vue项目里使用iview制作后台管理系统时,由于有多个页面都需要用到table组件,所以就把table写到了一个公共组件里,在其他页面去引用它,但是这时会发现一个问题,就是render函数里的th ...
- 一个技术汪的开源梦 —— 基于 .Net Core 的公共组件之 Http 请求客户端
一个技术汪的开源梦 —— 目录 想必大家在项目开发的时候应该都在程序中调用过自己内部的接口或者使用过第三方提供的接口,咱今天不讨论 REST ,最常用的请求应该就是 GET 和 POST 了,那下面开 ...
- 一个技术汪的开源梦 —— 基于 .Net Core 的公共组件之目录结构
一个技术汪的开源梦 —— 目录 这篇文章是开源公共组件的开篇那就先说说项目的 Github 目录结构和 .Net Core 的项目结构. 1. GitHub 目录结构和相关文件 - src 源码项目目 ...
- Java中是否可以调用一个类中的main方法?
前几天面试的时候,被问到在Java中是否可以调用一个类中的main方法?回来测试了下,答案是可以!代码如下: main1中调用main2的主方法 package org.fiu.test; impor ...
- 如何从零开始实现一个soa远程调用服务基础组件
说起soa远程调用基础组件,最著名的莫过于淘宝的dubbo了,目前很多的大型互联网公司都有一套自己的远程服务调用分布式框架,或者是使用开源的(例如dubbo),或者是自己基于某种协议(例如hessia ...
- react将多个公共组件归成一类,方便调用
目录结构 . ├── component # 公共组件存放 ├ ├── example ├ ├ ├── example1.ts # 例子1 ├ ├ ├── example2.ts # 例子2 ├ ├ ...
随机推荐
- 教你快速做一个自己的“ChatGPT”
摘要:在国内使用ChatGPT有些不便,是否可以基于OpenAI开放的API做一个给自己或者同事们使用的聊天机器人,甚至集成到更多的场景-. 本文分享自华为云社区<使用 FunctionGrap ...
- 通过 Blob 创建下载文件
Blob 如上图所示,Blob 对象有三个部分组成,data:image/jpeg 表示该 Blob 是什么类型的文件.base64 是一个二进制到文本的编码,更多细节查看Base64 编码/解码.其 ...
- Mybatis 实体类驼峰命名与数据库字段之间映射
数据库的命名规则和 Java 的命名规则不一致,导致实体类与数据库字段不能完美映射. 一.可以在 mapper.xml 中通过 resultMap 来解决: <resultMap id=&quo ...
- Java对象布局
1. 引言 由于Java面向对象的思想,在JVM中需要大量存储对象,存储时为了实现一些额外的功能,需要在对象中添加一些标记字段用于增强对象功能 .在学习并发编程知识synchronized时,我们总是 ...
- Kafka主题,分区,副本介绍
介绍 今天分享一下kafka的主题(topic),分区(partition)和副本(replication),主题是Kafka中很重要的部分,消息的生产和消费都要以主题为基础,一个主题可以对应多个分区 ...
- Django中admin的一些知识点
Django中的Admin站点管理: 内容发布的部分由网站的管理员负责,包括查看.添加.修改.删除数据: Django项目中默认启用Admin管理站点:列表页选项, 编辑页选项, 重写模板. #准备工 ...
- 原生javascript解锁恶心的CSDN强制关注才能阅读让文章自动展开(转部分内容)
此时你可以打开chrome浏览器的开发者工具 快捷键F12, 然后切换到Console界面 然后复制上面的javascript代码 var article_content=document.getEl ...
- LG8768 题解
题意 传送门 求长度为 \(n\) 的序列 \(a\) 的个数对 \(998244353\) 取模的结果,其中 \(a\) 满足: \(a_1=w\) \(a_{i-1}+L\le a_i\le a_ ...
- 403. 青蛙过河 (Hard)
问题描述 403. 青蛙过河 (Hard) 一只青蛙想要过河. 假定河流被等分为若干个单元格,并且在每一个单元格内都有可能放有一块石子(也有可能没有). 青蛙可以跳上石子,但是不可以跳入水中. 给你石 ...
- Javascript高级程序设计(000)
该分类下为学习Javascript高级程序设计的笔记,希望自己可以坚持学习,努力学习!加油! 一.组织结构 第 1 章,介绍 JavaScript 的起源:从哪里来,如何发展,以及现今的状况.这一章会 ...