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. 【!Important】如何保证线程执行的先后顺序

    1.假设有三个线程,分别为T1.T2.T3,如果让线程T2在线程T1之后执行,在线程T3之前执行. 使用线程的join方法,该方法的作用是“等待线程执行结束”,即join()方法后面的代码块都要等待现 ...

  2. jmeter 中 Client implementation HttpClient4和java区别实践一

    好吧,最近还是在折腾Jmeter,在一个post请求中,发现啃爹的竟然带有特殊字符:' 怎么办,直接将数据写入,如下: 然后在实际用post发请求时,jmeter自动给转义了,如下: xxxx=%27 ...

  3. (ecj)Eclipse的Java编译器分析之一——ecj介绍

    Java是一个开放的平台,对于除发布编译器/解释器/基础类库之外,该语言的负责机构更多的是制定一系列标准,任何符合标准的厂商产品均可用于市场投放.甚至包括其编译器及解释器. (比如Hibernate提 ...

  4. vs2017默认以管理员运行

    1. 打开VS的安装目录,找到devenv.exe,右键,选择“兼容性疑难解答”. 2. 选择“疑难解答程序” 3. 选择“该程序需要附加权限” 4. 确认用户帐户控制后,点击测试程序,不然这个对话框 ...

  5. CentOS7(linux) 通过服务名查询安装目录

    #ps aux|grep nginx root 1231 0.0 0.0 46336 956 ? Ss 04:21 0:00 nginx: master process /usr/sbin/nginx ...

  6. ubuntu下能ping通ssh不通的解决思路

    1.首先看看是否能ping通,如果ping不通可能就要考虑网线.路由等问题了: 2.看防火墙是否关闭,sshd是否开启 3.ssh -v 服务器的ip号,根据提示寻找可能的问题: 我的问题在这一步之后 ...

  7. seaborn画热力图注意的几点问题

    最近在使用注意力机制实现文本分类,我们需要观察每一个样本中,模型的重心放在哪里了,就是观察到权重最大的token.这时我们需要使用热力图进行可视化. 我这里用到:seaborn seaborn.hea ...

  8. win server 2008添加磁盘-脱机转换为联机状态方法

    解决方案如下: 1.运行:cmd2.输入:DISKPART3.DISKPART> san4.DISKPART> san policy=onlineall5.DISKPART>list ...

  9. iOS调用第三方导航和线路规划

    线路规划: https://blog.csdn.net/qq_19979539/article/details/51938995 百度地图:baidumap: 高德地图:iosamap: 腾讯地图:q ...

  10. SQL row_number() over(partition by函数

    1)row_number() over(partition by 列名1 order by 列名2 desc)的使用 表示根据 列名1 分组,然后在分组内部根据 列名2 排序,而此函数计算的值就表示每 ...