vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-first-vue-project</title>
</head>
<body>
<div id="app">
<com-a></com-a>
</div>
<!-- built files will be auto injected -->
</body>
</html>
2,在mian.js可以看见标签<com-a>如何引入
import Vue from 'vue' // import comA from './components/a'
import comA from './components/a' new Vue({
el: '#app',
components: { comA },
template: '<comA/>' })
3,a.vue(注意,我在a模块加了标签<com-b>,不是html标签,其实就是vue引入新的子组件)
分3步:
- 在父页面(a.vue)上引入写好的组件
import comB from './b' //comB为组件的name
- 注册组件
components:{ //注册组件
comB
},
- 驼峰命名的方式
<com-b> </com-b>
<template>
<div> I am a 'a' component
<com-b></com-b>
</div> </template> <script>
import comB from './b'
export default {
components: {comB}
}
</script>
页面如何传数据给组件
页面:
<com-a :prop-data="0" > </com-a>
// prop-data 传到组件的数据
组件:
export default {
components: {comB},
props: ['propData']
}
可以用this.propData获取到props(页面传过来的值) 为0
vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递的更多相关文章
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- 在JSP页面中调用另一个JSP页面中的变量
在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...
- JSP页面中引入另一个JSP页面
一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...
- HTML5中window.postMessage,在两个页面之间的数据传递
HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- Android应用程序组件Content Provider在应用程序之间共享数据的原理分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
随机推荐
- Visual Studio 2017&C#打包应用程序详细教程,重写安装类获取安装路径
Visual Studio搞了个Click One,在线升级是方便了,但对于俺们这苦逼的业余程序猿就... 别着急,折腾一下,还是能做出打包安装程序的.请移步CSDN看smallbabylong的文章 ...
- SQL 日期函数转换
1.转换函数 与date操作关系最大的就是两个转换函数:to_date(),to_char() to_date() 作用将字符类型按一定格式转化为日期类型: 具体用法:to_date('2004-11 ...
- 操作iframe的一些方法
//父页面操作iframe里的内容 oInput.onclick=function(){ var oBox = oIframe.contentWindow.document.getElementByI ...
- Proxy模式(代理[延迟]模式)
Proxy?? Proxy是"代理人"的意思,它指的是代替别人进行工作的人.代理实际上就是使用委托的机制,在代理的过程中你可以做点其他的事情,然后再来执行被代理对象的代码. 知识储 ...
- 树的计数 Prufer序列+Cayley公式
先安利一发.让我秒懂.. 第一次讲这个是在寒假...然而当时秦神太巨了导致我这个蒟蒻自闭+颓废...早就忘了这个东西了... 结果今天老师留的题中有两道这种的:Luogu P4981 P4430 然后 ...
- A. The Fair Nut and Elevator(暴力)
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- (转)认识 Linux 文件系统
7.1 认识 Linux 文件系统 原文:https://wizardforcel.gitbooks.io/vbird-linux-basic-4e/content/59.html Linux 最传统 ...
- Storm概念学习系列之什么是实时流计算?
不多说,直接上干货! 什么是实时流计算? 1.实时流计算背景 2.实时计算应用场景 3.实时计算处理流程 4.实时计算框架 什么是实时流计算? 所谓实时流计算,就是近几年由于数据得到广泛应用之后 ...
- 【JavaEE】WebService到底是什么?
一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...
- 使用fastcgi_cache加速你的Nginx网站
很久以前在TW上挖了个坑,说nginx的fastcgi_cache是被大家忽视的一大金矿,今天把这个坑填上. 对于变化不太频繁的数据,大家都比较喜欢存Memcached以减少数据库的读取,但还是会有语 ...