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在页面中自定义组件模块，以及页面与组件之间的数据传递的更多相关文章

  1. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  2. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  3. Angular06 组件、模块、父子组件之间的数据传递

    1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...

  4. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  5. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  6. JSP页面中引入另一个JSP页面

    一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...

  7. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

  8. 解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  9. Android应用程序组件Content Provider在应用程序之间共享数据的原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...

  10. Vue 爬坑之路（二）—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

随机推荐

  1. luoguP4931 情侣？给我烧了！（加强版）

    luogu 普通版题解:https://www.cnblogs.com/lcxer/p/10876856.html 在普通版里,我们考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ a ...

  2. day23作业详解

    1.题目 2.题目详解 点击查看详细内容 1. 1-1 封装 把功能封装到类中 class Message(object): def email(self):pass def msg(self):pa ...

  3. xcode定期清理记录一下

    此文章仅适用于适用于使用Xcode的开发者. 长期不清理Xcode中的一些文件你会发现自己的mac硬盘越来越小,而且是这个其他占了绝大部分的硬盘,在网上搜索了很多办法都没找到如何清理这些其他 后来来来 ...

  4. for in在对象和数组中的应用

    var obj = { name:'lei', be:'dd', age:23 } for(var poo in obj){ alert('对象的属性和值为:'+poo+':'+obj[poo]); ...

  5. 利用Python的smtplib和email发送邮件

    原理 网上已经有了很多的教程讲解相关的发送邮件的原理,在这里还是推荐一下廖雪峰老师的Python教程,讲解通俗易懂.简要来说,SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本 ...

  6. 如何理解javascript中的同步和异步

    javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流水线而已,要 ...

  7. Regionals 2014 >> Asia - Taichung 7003 - A Balance Game on Trees 树形DP +　二维费用背包

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  8. UVALive 7511 L - Multiplication Table 数学模拟题，暴力

    给定一副表,问其是否合法. 思路:当全部是?的时候,是合法的. 如果不是,那么,就找到一个数字,把它拆成若干个a*b的形式,去判断其它点是否合法即可. 拆分数字的时候,只需要枚举到sqrt(n),因为 ...

  9. (转)Linux系统stat指令用法

    <Linux系统stat指令用法>  原文:https://www.cnblogs.com/linux-super-meng/p/3812695.html stat指令:文件/文件系统的详 ...

  10. Storm概念学习系列之Blot消息处理者

    不多说,直接上干货! Bolt消息处理者 认识了消息源Spout和消息的数据存储元组Tuple,接下来了解消息的处理者Bolt.Bolt是接收Spout发出元组Tuple后处理数据的组件,所有的消息处 ...