1、组件也需要进行注册才可以使用：分为局部注册和全局注册

    <body>

        <div id="app" >

            <my-component></my-component>

            <my-component2></my-component2>

        </div>

    </body>

<script>

    //全局注册组件

    Vue.component('my-component',{

        template:"<div>my first globa component</div>"

    })

    var Child={

        template:"<div>my first  component22</div>"

    }

    var app = new Vue({

        el:"#app",

        //局部注册组件

        components:{

            'my-component2':Child

        }

    })

</script>

　　注意事项，template中，必须被一个元素包含。

2、 限制元素<table> <tr><ul><ol><select>，这些本来是不能嵌套div元素的，现在使用is属性，替换，实现可嵌套

 <table>

         <tbody is="my-component"></tbody>

</table>

//渲染之后结果

<table>

    <div>my first globa component</div>

</table>

3、component有的选项

template:模板字符串

data:是一个函数，return回去，如果return回去的是外部的数据，那么是共享的，如果是内部的，就是独立的。

methods

computed
props: 是一个数组
<my-component message="来自父组件的数据"></my-component>
//加v-bind是动态数据，直接使用是传递，固定的字符串
<my-component ：message="parentMessage"></my-component>

4、组件通讯

Vue(五)--组件的更多相关文章

  1. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  2. Vue之组件及组件通信

    组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...

  3. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  4. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  5. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  6. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  7. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  8. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  9. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

随机推荐

  1. Android应用开发以及设计思想深度剖析

    Android应用开发以及设计思想深度剖析(1) 21cnbao.blog.51cto.com/109393/956049

  2. 题解 UVA11300 【Spreading the Wealth】

    环形均分纸牌问题应该不少人都很熟悉了,而且题解区写的也比较全了...... 我这篇题解主要是介绍一个新的STL--nth_element 以及解答几个其他题解里面有应用但是没有注释的问题.(比如说我第 ...

  3. 初学python - 脚本文件

    解析:   第一行 #!/usr/bin/env python - py脚本运行环境[用python解释器解释脚本文件-对应python安装路径] 第二行 #-*-coding:utf-8-*- - ...

  4. 大数据list去重

    MaxList模块主要是对Java集合大数据去重的相关介绍. 背景: 最近在项目中遇到了List集合中的数据要去重,大概一个2500万的数据,开始存储在List中,需要跟一个2万的List去去重. 直 ...

  5. Ubuntu如何配置网桥 Ubuntu系统配置网桥详细教程

    注意:如果是在ubuntu桌面版本上使用,图形化控制与ifupdown配置不兼容.如果使用ifupdown来配置,需要禁止使用图形化控制. 本文经过本人结合网络内容亲身实践,配置通了ifupdown ...

  6. 分享自建的 Jrebel License Server 激活 Jrebel

    使用在线验证服务器激活 Jrebel 与 Idea 说明 代码来自于开源项目: gsls200808 / JrebelLicenseServerforJava 自建的服务地址 http://jrebe ...

  7. tomcat在bin下的startup.bat下启动报错

    测试环境是否安装配置好. 如果环境配置好.报错如下:或者是730013 -----------解决问题:是因为tomcat端口被占用.查看是否启动两个tomcat

  8. nginx（三）-动静分离

    什么叫动静分离 所谓动静分离就是说我们的图片,css,js之类的文件都交给nginx来处理,nginx处理不了的,比如jsp就交给tomcat来处理. 有人计算过,nginx代理处理静态请求远远优于t ...

  9. 自动化测试接口PYTHON

      在开发测试中经常会遇到接口迭代和代码重构,一个无关紧要的改动往往会引起整个项目的运行.现有的接口测试中往往只是针对单一接口的测试,可是业务的连贯性是非常紧密的,比如:用户从登陆,获取商品信息,下单 ...

  10. 《大数据日知录》读书笔记-ch2数据复制与一致性

    CAP理论:Consistency,Availability,Partition tolerance 对于一个分布式数据系统,CAP三要素不可兼得,至多实现其二.要么AP,要么CP,不存在CAP.分布 ...