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. linux 安装python3.7 报错No module named '_ctypes'

    ModuleNotFoundError: No module named '_ctypes' 操作系统:centos yum install libffi-devel ./configure --en ...

  2. Spark JavaRDD、JavaPairRDD、Dataset相互转换与打印

    主要内容: 1. List转JavaRDD,打印JavaRDD 2. List转JavaRDD,JavaRDD转JavaPairRDD,打印JavaPairRDD 3. JavaRDD<Stri ...

  3. Java函数的联级调用

    String类的方法可以连续调用: String str="abc"; String result=str.trim().toUpperCase().concat("de ...

  4. python学习笔记1.4

    注释不被程序执行的辅助性说明信息- 单行注释:以#开头,其后内容为注释# 这里是单行注释- 多行注释:以'''开头和结尾''' 这是多行注释第一行这是多行注释第二行 ''' 保留字and elif i ...

  5. MyEclipse 汉化后切换回英文（中英文切换）

    没事玩玩MyEclipse,按网上的办法把它汉化了!搞了些教程看,教程用的都是英文,还是把MyEclipse也切换回原来的英文得了! 方法:1.复制MyEclipse的快捷方式:2.右键快捷方式-&g ...

  6. 高阶篇：4.1.2.3）产品零件级别的QFDII

    本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...

  7. sql查询字段中的值长度最大的记录

    SELECT max(length(字段)) FROM 表名;

  8. BZOJ 2457 双端队列

           Sherry 现在碰到了一个棘手的问题,有N个整数需要排序.        Sherry 手头能用的工具就是若干个双端队列.        她需要依次处理这 N 个数,对于每个数, Sh ...

  9. .net core集成 vue

    1. 在vs 2017 中选中.csproj文件右键修改. 2. 在.csproj 文件中添加如下代码,即表示在构建之前先执行 npm install 和npm run build. <Targ ...

  10. python 库 、包 、模块

    概念: 模块: 模块是一种以.py为后缀的文件,在.py文件中定义了一些常量和函数.模块的名称是该.py文件的名称.模块的名称作为一个全局变量__name__的取值可以被其他模块获取或导入. 模块的导 ...