https://blog.csdn.net/ywl570717586/article/details/79984909

vue.js中全局组件

  • 全局组件的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app01></app01>
</div> <template id="app01">
<div>
<p>app01</p>
</div>
</template> <script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
);
let vm = new Vue({
el: "#app",
})
</script>
</body>
</html>
  • 全局组件一旦定义,想在哪里使用就在哪里使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app02></app02>
</div> <template id="app01">
<div>
<p>app01</p>
</div>
</template> <template id="app02">
<div>
<p>app02</p>
<app01></app01>
</div>
</template> <script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
); let app02 = {
name: 'app02',
template: "#app02",
}; let vm = new Vue({
el: "#app",
components:{app02}
})
</script>
</body>
</html>

webpack: 自定义全局组件并使用

1.定义

2.Vue.use(login); //相对单文件, 多了这步

3.Vue.component('login', login);

4.其他vue使用.

login.vue

<template>
<div>login</div>
</template> <script>
export default {
name: "login"
}
</script> <style scoped> </style>

main.js

import Vue from 'vue'
import App from './App.vue' import login from './components/login.vue' Vue.use(login);
Vue.component('login', login); //这两条两者一个就ok了.
new Vue({
el: '#app',
render: c => c(App)
});

https://mint-ui.github.io/docs/#/zh-cn2/quickstart

App.vue

<template>
<div>
<p>app</p>
<login></login>
</div>
</template> <script>
export default {
name: "app"
}
</script>

webpack: 导入组件,局部使用

<template>
<div>
<p>app</p>
<login></login>
</div>
</template> <script>
import login from './components/login.vue' export default {
name: "app",
components: {
login
}
}
</script>

[vue]webpack中使用组件的更多相关文章

  1. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  2. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  3. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  4. vue项目中使用组件化开发

    最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...

  5. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  6. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  7. Javascript - Vue - webpack中的axios

    导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...

  8. 关于vue,webpack 中 “exports is not defined”报错

    vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...

  9. vue+ webpack中的animate.css实现的执行多个连续的动画

    1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实 ...

随机推荐

  1. include_once与require_once的区别

    ①作用及用法  可以减少代码的重复 include(_once)("文件的路径")与require(_once)("文件的路径") ②理解 说白了,就是用包含进 ...

  2. python数据类型之pandas—DataFrame

    DataFrame定义: DataFrame是pandas的两个主要数据结构之一,另一个是Series —一个表格型的数据结构 —含有一组有序的列 —大致可看成共享同一个index的Series集合 ...

  3. Django中,ajax检测注册用户信息是否可用?

    ajax检测注册用户信息主体思路 1.在settings.py中配置需要使用的信息 #对static文件进行配置 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'s ...

  4. How to add the ApplicationPoolIdentity to a SQL Server Login

    The ApplicationPoolIdentity is a virtual account in Windows that is dynamically generated when the a ...

  5. PAT甲级1075 PAT Judge

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805393241260032 题意: 有m次OJ提交记录,总共有k道 ...

  6. 终于知道什么情况下需要实现.NET Core中的IOptions接口

    自从接触 IOptions 之后,一直纠结这样的问题:自己定义的 Options 要不要实现 IOptions 接口. 微软有的项目中实现了,比如 Caching 中的 MemoryCacheOpti ...

  7. Orchard之Module开发

    一:生成新项目 首先,要启动 Code Generation,参考<Orchard之生成新模板>. 其次,进入命令行,输入: codegen module Tminji.Requireme ...

  8. [No0000126]SSL/TLS原理详解与WCF中的WS-Security

    SSL/TLS作为一种互联网安全加密技术 1. SSL/TLS概览 1.1 整体结构 SSL是一个介于HTTP协议与TCP之间的一个可选层,其位置大致如下: SSL:(Secure Socket La ...

  9. [No0000EA]C# 可空类型(Nullable)

    C# 可空类型(Nullable) C# 提供了一个特殊的数据类型,nullable 类型(可空类型),可空类型可以表示其基础值类型正常范围内的值,再加上一个 null 值. 例如,Nullable& ...

  10. GatewayWorker

    GatewayWorker介绍 一.工作原理 Register.Gateway.BusinessWorker进程启动 Gateway.BusinessWorker进程启动后向Register服务进程发 ...