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. Mysql内置功能《五》 函数

    一 函数 MySQL中提供了许多内置函数,例如: 一.数学函数 ROUND(x,y) 返回参数x的四舍五入的有y位小数的值 RAND() 返回0到1内的随机值,可以通过提供一个参数(种子)使RAND( ...

  2. Mysql数据类型《二》字符类型

    字符类型 #官网:https://dev.mysql.com/doc/refman/5.7/en/char.html #注意:char和varchar括号内的参数指的都是字符的长度 #char类型:定 ...

  3. day12学python 多进程+进程池

    多进程+进程池 多进程(不同进程不可直接访问数据) 引入(多进程套线程) 多进程 需导入multiprocessing模块 模板示例1 import threading,time,multiproce ...

  4. Android中Application类的使用

    在最近的Android项目中,有些代码需要从程序的运行周期开始一直到运行周期结束:比如说本地数据库的初始化,从服务器获取数据等:可以说Application对象的生命周期是整个程序中最长的,它的生命周 ...

  5. UIViewContentMode-

    图片很小,frame很大 图片很大,frame很小 UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit, UIViewConte ...

  6. PHP中SimpleXMLElement对象字符编码

    最近在使用SimpleXMLElement来生成和解析XML. 由于我们使用PHP开发的这边使用UTF-8编码,而对方使用GBK编码,因此就遇到了中文字符编码问题. 后来发现,XML内部的编码与其头 ...

  7. flask_restful(转载）

    flask插件系列之flask_restful设计API 前言 flask框架默认的路由和视图函数映射规则是通过在视图函数上直接添加路由装饰器来实现的,这使得路由和视图函数的对应关系变得清晰,但对于统 ...

  8. 2019 CCPC-Wannafly Winter Camp Day1 (Div2, onsite)

    solve:4/11 补题:6/11 A 机器人 补题:zz 这是一道分类讨论的题目,有一个规律就是如果必须要从第一个区到第二个区,那么最多转区两次(1到2一次,2到1一次),然后分类讨论即可,只要细 ...

  9. maven 可执行jar maven-shade-plugin

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  10. mssqlServer大量数据快速插入：SqlBulkCopy

    SqlBulkCopy类,为微软的一个大量数据快速插入.直接上代码 表结构: namespace SqlBulkCopy的演示 { using System.Data.SqlClient; publi ...