Vue踩坑系列之调用外部组件

最新推荐文章于 2022-09-09 22:16:12 发布
最新推荐文章于 2022-09-09 22:16:12 发布
阅读量348 收藏
点赞数
分类专栏： Vue踩坑日记 文章标签： Vue 调用外部组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20501625/article/details/101381855
版权

Vue小白登场，踩坑之路实在艰辛。
先上图，再说明我想干嘛。。看标题呀，调用外部组件。这里是从App.vue调用外部组件。
正确情形：

  1. import 导入组件，这个地方没有什么要求，首字母大小写无所谓。声明组件也是同样，就像这两个小箭头所示。
  2. 下面重点来了，这里的’Header’，必须是大写，因为在模板中引用的时候，必须是大写的标签，才会显示布局。如图：

模板图--布局

RFLB_G
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目遇到的坑（vue项目中的某个组件调用外部js）
limy_cxm的博客
06-14 2万+
第一步骤 当项目做一个圆环进度条的时候，我自己用canvas写了一个js,并且封装成函数。当时想到的是直接将函数写在组件中然后进行调用： 报错了：Uncaught TypeError: Cannot read property ‘getContext’ of null 然后意识到canvas的getContext方法需要在页面文档加载完成之后才会去触发识别这个属性。所以canvas写的代码不
Vue父组件调用子组件事件方法
08-27
这里我们将详细介绍两种常见的Vue父组件调用子组件事件方法。 首先，我们需要理解Vue中的事件机制。Vue采用自定义事件系统来处理组件间的通信，这被称为“事件驱动”编程。组件可以通过`$emit`方法触发事件，而其他...
手摸手教你封装跨项目复用的 Vue 组件
weixin_34292402的博客
04-28 1584
在前端项目的开发中，往往会根据业务需求，沉淀出一些项目内的UI组件/功能模块（以下通称组件） 等；这些组件初期只在同一个项目中被维护，并被该项目中的不同页面或模块复用，此时的组件逐步被完善，是一个只聚焦于功能和健壮性的成长期。 随着业务的发展，原来的项目可能不得不产生裂变，变成几个相似但各有不同的项目 -- 比如在初始项目中积累经验后，需要推广到相似的业态上或根据不同大客户的需求进行定制，这种情况...
【Vue】Vue.extend()在非vue项目中使用vue组件
锋利的绵羊的博客
06-30 575
假设项目目录结构如下： 在 引入 组件： 此时 组件已被添加至页面中，可通过组件实例（）控制组件：
vue基础：在跟组件（App.vue）调用外部组件
谷咕咕
01-21 1万+
vue基础：在跟组件（App.vue）调用外部组件 在vue学习中，我们发现将所有的组件，都放在根组件是不合理的，同样也是低效的。于是我们将不同的模块分割，需要哪个模块的时候就可以直接调用。这类似于html5中模板的性质。 1.首先我们需要创建一个组件，所有的组件可以放在一个目录里，便于规范化管理。 2.创建所有的组件也需要像根组件一样，严格的格式要求。 <template> ...
vue 的编辑跟新增引用外部的组件
Sunshine0508的博客
09-05 1454
首先准备两个组件： 一个表单页面，一个新增与编辑共用的弹框页面 表单页面调用新增与编辑的页面（groupId是编辑弹框的Id；currentId默认为-1;dialogTitle是弹框的标题） 写一个closeDialog的方法 在子组件里调用closeDialog的方法用$emit        ...
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue 父组件调用子组件方法及事件
08-27
Vue 父组件调用子组件方法及事件 在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。 父组件调用子组件方法 在上面的...
vue踩坑记录之数组定义和赋值问题
12-29
问题场景：vue页面初始化展示请求后台返回的数据失败，没有报错 有效日期> type=daterange range-separator=至 start-placeholder=开始日期 end-placeholder=结束日期> data(){ return{ effective
Vue常用外部组件使用
qq_33274797的博客
05-24 1385
1、Vue使用axios 第一步：npm install axios 第二步:配置文件 //引入vue框架 import Vue from 'vue' //引入资源请求插件 import axios from 'axios' import { stringify } from 'querystring'; //axios 配置 axios.defaults.timeout = 5000;...
vue组件内部引入外部js文件的方法
11-21
之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js： export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第二种使用 createElement 方法： export default
vue中如何在外部调用methods的方法
zhangjing1019的博客
09-09 5万+
1.首先定义一个公共的vue组件； var eventHub = new Vue(); 2.在事件当前的组件中，在created中，用$on向公共的组件eventHub传递，translate是自定义的，getCardNum(data)是要在外部调用的方法; eventHub.$on('translate', function (data) { that.g
Vue页面中引用自定义组件
明知山
02-03 2024
比如我想引用一个外部的头部导航的组件，因为这个导航在很多地方都用到，避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件 这里是组件的内容，引用了element ui <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pan...
vue如何在一个组件中引用另外一个组件并使用?有两种方法
热门推荐
msn-06-s
02-03 7万+
方法一:代码如下 //1.先使用import导入你要在该组件中使用的子组件 import testComponent from './testComponent.vue' export default { //2.然后,在components中写入子组件 components:
Vue中创建组件及引入组件及调用
On the way
04-01 5041
第一章 Vue中创建组件及引入组件及调用 文章目录一、什么是组件？二、如何注册组件？1.注册组件2.vue项目中引入组件总结 Vue创建组件 ` Vue框架最核心思想就是组件化，方便开发，便于维护管理，那么，如何在vue中创建组件及如何引用呢？ 一、什么是组件？ 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 二、如何注册组件？ 1
Vue项目——引入外部组件
weixin_34195546的博客
03-15 2056
1234567891011121.声明一个组件 chila.vue<template> <div> child1 //显示内容 </div> </template> <script> export default { name: "child1" } &l...
vuepress引入外部组件后build报错window is not defined
qq_39056437的博客
11-23 2509
解决方法 不要全局注册组件，在单页的mounted里动态引入 <template> <component v-if="dynamicComponent" :is="dynamicComponent"></component> </template> <script> export default { data() { re...
vue组件中使用第三方组件,vue组件调用另一个组件
纸尿裤排行
09-09 1344
/引入子组件Child export default { name: "parent", components: { Child // 将组件隐射为标签 }, methods: { parentClick() { this.$refs.mychild.childClick("我是子组件里面的方法哦");您可能感兴趣的文章:VUEJS2.0子组件访问/调用父组件的实例中父组件调用子组件的内部方法示例ES6下子组件调用父组件的方法(推荐)。
关于Vue组件名大小写的一些问题
小时候很快乐的博客
11-15 6990
关于Vue组件名大小写的一些问题 近期公司组织前端框架技术分享，我选了Vue，在理解过程中发现组件命名时可能会踩到的一些坑。网上搜索发现对此的一些解释都不太准确，写篇博客整理一下自己的一些试错经验吧。 全局组件在进行注册时，对组件名的大小写是没有进行任何限制的，大小写Aa下划线_短线-甚至是中文’啊’都可以进行注册。当然中文不能做为第一个字符，也不建议在组件名中使用中文（测试浏览器：谷歌、火狐） ...
vue2 子组件调用父组件函数
最新发布
08-25
以上就是Vue2中子组件调用父组件函数的两种方式。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [Vue子组件怎么调用父组件的方法 Vue子组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值