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. Eclipse下tomcat输出路径配置

    在Eclipse下配置server为Tomcat(一般为Tomcat 6.X),双击server面板中的Tomcat v6.0 Server,出现的Server Locations配置有三个选项: 1 ...

  2. Android: requires android.permission.READ_EXTERNAL_STORAGE, or grantUriPermission()

    在安卓上使用组件react-native-contacts报错,是需要添加联系人的时候,说是权限问题,配置了manifest文件后依然不起效果, 解决方法: 在需要引入react-native-con ...

  3. php使用百度地图API

    首先注册百度开发者平台账号,创建应用获取AK 不同的应用功能不同,一定要注意,没有的功能调用会提示APP被禁用 根据开发文档使用 给出例子:百度地图WEB api http://lbsyun.baid ...

  4. Jmeter性能测试-----参数化方法CSVRead函数

    Jmeter里面参数化的方法有很多,大家可以结合自己的项目情况来使用哪种方式来调用测试 数据. 下面我给大家介绍下Jmeter里CSVRead函数来获取参数的方法: 我这里已去到直播间发表评论为例(这 ...

  5. CompareToBuilder构建Comparator

    import org.apache.commons.lang.builder.CompareToBuilder; Collections.sort(outboundNotices, new Compa ...

  6. LL_01

    http://www.52pojie.cn/thread-262602-1-1.html C http://www.92jh.cn/forum.php?mod=viewthread&tid=1 ...

  7. unicode字符和多字节字符的相互转换接口

    作者:朱金灿 来源:http://blog.csdn.net/clever101 发现开源代码的可利用资源真多,从sqlite3的源码中抠出了几个字符转换接口,稍微改造下了发现还挺好用的.下面是实现代 ...

  8. Android接入支付宝支付实现

    接上篇android接入微信支付文章,这篇我们带你来接入支付宝支付服务 简介 首先要说明的是个人感觉接入支付宝比微信简单多了,很轻松的,所以同学们不要紧张~ 当然还是老规矩啦,上来肯定的贴上官网地址, ...

  9. Spring Boot 的配置文件application.properties

    Spring Boot 中的application.properties 是一个全局的配置文件,放在src/main/resources 目录下或者类路径的/config下. 作为全局配置文件的app ...

  10. grafana快速入门

    入门 本指南将帮助您开始并熟悉Grafana.它假定您有一台正在运行的Grafana服务器,并至少添加了一个数据源. 初学者指南 观看10分钟的初学者指南,以建立仪表板,以快速介绍设置仪表板和面板. ...