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. day05.1-文件处理

    1. 文件处理流程 打开文件,得到文件句柄并赋值给一个变量: 通过句柄对文件进行操作: 关闭文件 with open("filename","r",encodi ...

  2. 932. Beautiful Array

    For some fixed N, an array A is beautiful if it is a permutation of the integers 1, 2, ..., N, such ...

  3. 【maven】---聚合和继承

    前言 自从我知道写maven实战这本书的作者长得随心所欲后,我再拿起这本书真心的不想看前言了.下面分享一下maven中的所谓的聚合和继承. 内容 下文中的子本指的是:多个maven项目. 父本指的是: ...

  4. [转贴]VC编译器版本号_MSC_VER and _MSC_FULL_VER

    Visual Studio version and discrimination macros Abbreviation Product name [Visual Studio version] †1 ...

  5. CRC循环冗余校验算法

    现实中通信链路都不会是理想的,比特在传输的过程中可能会出现差错,0变成1,1变成0.这就叫做比特差错.因此为了保证数据传输的可靠性,在计算网络传输数据时,必须采用各种检验措施来处理比特差错.在数据链路 ...

  6. [AIR] 检测移动设备运动

    Accelerometer 类根据由设备的运动传感器检测的活动调度事件.此数据表示设备的位置或沿三维轴的移动.当设备移动时,传感器会检测到此移动并返回加速数据.Accelerometer 类提供了各种 ...

  7. TCP的超时与重传

    一.引言 对于每个TCP连接,TCP管理4个不同的定时器 重传定时器用于当希望收到另一端的确认. 坚持 (persist) 定时器使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口. 保活 (ke ...

  8. Flink学习笔记：Flink Runtime

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  9. nginx高性能WEB服务器系列之七--nginx反向代理

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  10. 转一个财务方面常用到的数字金额转成汉字大写金额 php类

    系统里有牵扯到财务.合同等方面的处理时,常常需要把数字金额转成汉字大写金额(貌似这样正规),转一个转换的php class吧!<?php// 诸海加(ALPHA .z)// 2000-7-19 ...