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. 把查询出来的结果进行修改再赋值给list

    List<RivBillNoPatternL> list = this.jdbcTemplate.getJdbcOperations().query(sqlSb.toString(), p ...

  2. 10----padding（内边距）

    padding padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充 ...

  3. 强制更新客户端Silverlight XAP 文件

    在发布小程序更新的时候访问的总是原来的程序,猜想应该是缓存的原因.在网上查找方法 <div id="silverlightControlHost"> <objec ...

  4. 007 Reverse Integer 旋转整数

    Given a 32-bit signed integer, reverse digits of an integer.Example 1:Input: 123Output:  321Example ...

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

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

  6. Unity3D游戏高性能战争迷雾系统实现

    一 效果图 先上效果图吧,这是为了吸引到你们的ヽ(｡◕‿◕｡)ﾉﾟ 战争迷雾效果演示图 战争迷雾调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的 ...

  7. C 碎片六 函数

    一.程序编译执行过程 程序的编译执行过程分为4个阶段:预处理阶段.编译阶段.汇编阶段.连接阶段 1. 预处理阶段:预处理器(cpp)处理以头文件.宏.条件编译(字符#开头)等内容的替换.此阶段不进行语 ...

  8. 洛谷 P1281 书的复制

    书的复制 Code: #include <iostream> #include <cstdio> #include <cstring> using namespac ...

  9. CentOS-7.3.1611编译安装 Nginx-1.12.1+mysql-5.7.19+PHP-7.1.8+zabbix-3.4.1

    CentOS-7.3.1611编译安装 Nginx-1.12.1+mysql-5.7.19+PHP-7.1.8+zabbix-3.4.1 下载软件 1.下载nginx http://nginx.org ...

  10. 如何查看与显示oracle表的分区信息

    显示分区表信息 显示数据库所有分区表的信息:DBA_PART_TABLES 显示当前用户可访问的所有分区表信息:ALL_PART_TABLES 显示当前用户所有分区表的信息:USER_PART_TAB ...