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. 整理javascript基础

    原始类型值(Primitive values) 下面的全是原始类型值(简称:原始值): 布尔类型:true,false 数字类型:1736,1.351 字符串类型: 'abc',"abc&q ...

  2. CSS3水平翻转样式和background-size兼容问题

    一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { ...

  3. better-scroll在vue中的应用

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...

  4. API自动化测试 Soap UI工具介绍

    一.   建立测试用例 (一)   基本概念 soapUI 中工程的层次结构 项目名称:位于最上层 (BookStoreTest),项目可以包含多个服务的定义. REST 服务定义:服务其实是对多个 ...

  5. 补丁patch 漏洞 bug或glitch

    补丁patch漏洞 bug或glitch    

  6. ObjectARX二次开发创建自己的静态库，如同objectARX库一样

    objectARX二次开发的时候,经常会用到一些重复使用的类,如果类已经足够的好,那么我们可以编译成静态库,加快开发和编译的速度,提高工作效率. 环境vs2010+objectARX2012wizar ...

  7. docker导入导出镜像

    docker容器导入导出有两种方法: 一种是使用save和load命令 使用例子如下: docker save ubuntu:load>/root/ubuntu.tar docker load& ...

  8. python模块之——tqdm（进度条）

    from tqdm import tqdm for i in tqdm(range(10000)): """一些操作""" pass 效果: ...

  9. P4850 [IOI2009]葡萄干raisins 记忆化搜索

    $ \color{#0066ff}{ 题目描述 }$ 普罗夫迪夫的著名巧克力大师Bonny需要切开一板带有葡萄干的巧克力.巧克力是一个包含许多相同的方形小块的矩形.小块沿着巧克力的边排列成n行m列,即 ...

  10. 调试K3网页版需要注意的问题

    1.BIN目录下不能存放类名相同的多个文件,即使修改了dll名称也不可以,必须保持唯一性,多余的备份到其他目录 2.引用的标准dll集合需要与当前运行程序的标准dll集合保持一致,可以通过修改引用路径 ...