vue脚手架搭建好项目后,组件间的引用通过components

    import bannerComponent from './banner'
export default {
data(){
return { }
},
components:{
bannerComponent
}
}

使用时

<bannerComponent></bannerComponent>

【注意】

有时为了区分明显,一般在使用时在前面加上v-,所以可以对上面做下改动

    import bannerComponent from './banner'
export default {
data(){
return { }
},
components:{
'v-bannerComponent':bannerComponent
}
}

使用时

<v-bannerComponent></v-bannerComponent>

.

vue工程化引入组件模板的更多相关文章

  1. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  2. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  3. 【Vue.js】vue引入组件报错:该组件未注册?

    [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...

  4. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  5. Vue 定义组件模板的七种方式(一般用单文件组件更好)

    在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...

  6. Vue 小实例 - 组件化 、cli 工程化

    1. 组件化  (父子组件通信: 父 - 子 :props 数组           子 - 父  :  子层触发事件,调用  $emit 触发父层对应自定义事件,可函数处理传参 / $event 获 ...

  7. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  8. Vue 下拉列表 组件模板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 045——VUE中组件之父组件使用scope定义子组件模板结构

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 实现的是Linux和Windows之间的一种共享--samba

    samba 基本配置及自定义控制 https://www.cnblogs.com/l-hh/p/9473937.html Samba简介: Samba实现的是Linux和Windows之间的一种共享, ...

  2. 最好的6个Go语言Web框架

    原文:Top 6 web frameworks for Go as of 2017 作者:Edward Marinescu 译者:roy 译者注:本文介绍截至目前(2017年)最好的6个Go语言Web ...

  3. c#截屏功能的实现

    using System;using System.Collections.Generic;using System.Drawing;using System.Linq;using System.Ru ...

  4. pom.xml内容没有错,但一直报错红叉 解决办法

    转自:http://www.cnblogs.com/sxdcgaq8080/p/5590254.html [maven] pom.xml内容没有错,但一直报错红叉 解决办法 1.首先看一下下面的这两个 ...

  5. bzoj 2152: 聪聪可可【点分治】

    裸的点分治,运算在模3下进行然后统计答案的时候统计余1的*余2的*2+余0的^2 #include<iostream> #include<cstdio> using names ...

  6. bzoj 1355: [Baltic2009]Radio Transmission【kmp】

    kmp复健,答案是n-next[n] #include<iostream> #include<cstdio> using namespace std; const int N= ...

  7. [App Store Connect帮助]八、维护您的 App(6)使某个先前版本不可下载

    如果您 App 的某个先前版本出现了法律或可用性问题,您可以避免该版本可供顾客下载. 如果该版本状态为“可供销售”且存在法律或可用性问题,您必须提交一个 App 更新,并在提交新版本时指明先前版本中存 ...

  8. 【OpenJ_Bailian - 2945】拦截导弹(动态规划)

    拦截导弹  Descriptions: 某国为了防御敌国的导弹袭击,开发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高 ...

  9. 解决window.opener.obj instanceof Object会输出false的问题

    在a.html页面中: window.obj = {name: "jinbang"} 在a.html页面中打开新窗口b.html页面: console.log(window.ope ...

  10. springMVC @Valid不起作用

    springmvc使用JSR-303进行表单验证不生效的问题 spring只是支持jsr-303验证,但却不提供jsr-303的实现,文档中提及了需要导入类如hibernate-validator等j ...