//定义一个名为 button-counter 的新组件
Script:
    Vue.component('button-counter',{//button-counter  这个是组件的名字
        data:function(){
            return{
                count:0
            }
        },
        template:'<button v-on:click="count++">单击  {{ count }}</button>'
    })

组件是可复用的Vue 实例，并且有一个名字：
我们可以在一个通过 new Vue 创建的Vue根实例中，
把这个组件作为  自定义元素(自己定义的标签 这样来理解)  来使用：
Html:
    <div id="components-demo">
        <button-counter></button-counter>
    </div>

Script:
    new  Vue({ el: '#components-demo' })//指定挂载位置
    new 了一个Vue 实例

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

自己的理解：因为组件是可复用的 Vue 实例
    就是一个特殊的Vue实例，而这个实例 和new vue区别在 组件是可以复用的。
    而且他还可以接收 data /computed/watch/methods 等选项

    component(组件) 的复用

    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-cunter>
        <button-counter></button-counter>
    </div>

    注意：当单击按钮时，每个组件都会给自独立维护它的 count 。
        因为你每用一次组件，就会有一个它的新实例被创建

        理解：这里的每用一次 是 单击一次还是 <button-counter></button-counter>标签被使用一次
             作用域不同
             复用不仅仅是代码上的复用 更是功能的复用，而且每次复用都是一个新的实例

data 必须是一个函数
    当我们定义<button-counter>组件时，你可能会发现他的data并不是像这样直接提供一个对象

    data:{
        count:0
    }

    而是：
    Vue.components('button-counter',{
        tempalte:'<p>我是一个组件是一个模板，这个是我自己的理解</p>',
        data:function(){
            return {
                count:0
            }
        }
    })

    一个组件的data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立拷贝

    自己理解 条件 ：    一个组件假如有data选项此选项必须是一个函数
                    也必须还有一个templtae选项
                    每个名字映射着一份且在内存中独立区域，彼此之前不存在数据的交换

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。

全局组件注册方式：Vue.component(组件名,{方法})

组件的组织
     通常一个应用会一一颗嵌套的组件树的形式来组织
    例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的

    注册类型：全局注册
             局部注册。
    至此，我们的组件都只是通过 ：
        Vue.component 全局注册的：
            Vue.component('my-conponent-name',{
                //。。。options....
            })

注意 1:
    全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例，也包括其组件树种的索引子组件的
    模板中。

    全局组件必须写在new Vue()创建之间，才在该根元素下面生效。
    <body>
        <div id='app'>

            <my-component></my-component>

        </div>

        <div id='app-1'>

            <my-component></my-component>
        </div>
    </body>

    <scirpt>
        Vue.component('my-component',{
            template:"<h1>我是全局组件,{{ msg }}</h1>"，
            data(){
                return{
                    msg:'有时候努力不一定会有回报，但是还是有一丝丝的可能的。'
                }
            }
        })

        new Vue({
            el:'#app'//申明挂载点
        });

        new Vue({
            el:'#app-1'
        })

    </scirpt>

渲染效果：
    <div id="app">
        <h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
    </div>

    <div id="app-1">
        <h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
    </div>

注意 2：

    模板里面第一级 只能有一个标签，不能并行

    Vue.component("my-component",{
        template:"<h1>我是全局组件</h1>" +
        "<p>我是全局组件内标签</p>"
    });
    //因为这里h1 和 p 标签在同一级别里面了
    所以会报错

    修改如下：
    Vue.component("my-component",{
        template:"<h1>我是全局组件<p>" +
        "我是全局组件内标签</p></h1>"
    });

 局部注册方式：
     直接在Vue实例里面注册

     <body>
         <div id='app1'>
             <child-component></child-component>
         </div>

     <script>
         new Vue({
             el:'#app1',
             components:{
                 "child-component":{
                     template:'<h1>我是局部组件</h1>'
                 }
             }
         });

         //这样行不行
         new Vue({//这是 实例化一个 根实例
             el:'#app1', //这个也是属性  这个属性是用来 确定 挂载点的
             components:{//这是属性  这个属性是用来注册组件的
                 "child-component":template:'<p>这样估计不行</p>'
             }

         });
     </script>

     注意：
         在Vue 直接定义组件时
         属性components  是复数形式:(自己理解，组件的数量不确定吗)

         多组件定义时 应该如下：

          <body>
              <div id='app1'>
                  <child-component-2></child-component-2>
                  <child-component-1></child-component-1>
              </div>

              <script>
                  var child1={
                      template:'我是一个局部组件'
                  };

                  var child2={
                      templae:'<h1>我也是一个局部组件，你咬我啊！</h1>'
                  };

                  new Vue({
                      el:'#app1',
                      components:{
                          "child-component-1":child1,
                          "child-component-2":child2
                      }

                  });

              </scirpt>
          </body>

 自定义局部组件：另外一种情况
       其它属性可以和实例中一样，但是data属性必须是一个函数：
      <body>
          <div id="app1">
              <child-component></chidl-component>
          </div>
          <scirpt>
              var child={
                  teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
                  data:function(){
                      return {
                          msg:'世界很美，要懂得发现美好！',
                          count:1
                      }
                  },
                  methods:{
                      add2：function(){
                          this.count++
                      }
                  }
              };

              //可不可以这样写：
               var child={
                  teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
                  data(){
                      return {
                          msg:'世界很美，要懂得发现美好！',
                          count:1
                      }
                  },
                  methods:{
                      add2：function(){
                          this.count++
                      }
                  }
              };

              new Vue({
                  el:'#app1',
                  components:{//注册局部组件并且给它取了一个名字 child-components 这个名字是用在html中的，说白了 就是自定义了一个html 标签而已。
                      "child-components":child
                  }

              });

          </scirpt>
      </body>

Vue

Vue 全局注册逐渐 和 局部注册组件的更多相关文章

  1. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  2. Vue组件全局/局部注册

    全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...

  3. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

  4. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  5. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  6. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  7. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  9. Vue全局弹窗:一次注册，全局可弹

    Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...

随机推荐

  1. cap文件的格式说明

    前面24个字节是.cap文件的文件头. 头信息对应的结构体为:struct pcap_file_header {  bpf_u_int32 magic;  u_short version_major; ...

  2. Android DevArt4：IntentFilter学习及深入~问题描述：在不指定具体action前提下，如果有两个以上的Activity，具有完全相同的intent-filter，项目同步是否会出现异常？程序运行是否会崩溃？

    概述:GitHub IntentFilter意图过滤器,三种匹配规则:action.category.data 重点:过滤规则中必须设置 '<category android:name=&quo ...

  3. jQuery中的end()方法

    定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 以上是官方说法,比较难理解. 还是用一个例子来说明 <!DOCTYPE html> <h ...

  4. hexo发表博文

    3.4创建博客文章与发布 在hexo 目录下终端命令: $ hexo new '文件名' //会在source/_posts创建一个文件名.md文件 这就可以使用markdown编辑器开始写自己的博客 ...

  5. SQL server 基本语法

    文字摘自https://www.cnblogs.com/chaoa/articles/3894311.html 一.定义变量 --简单赋值 declare @a intset @a=5 print @ ...

  6. mongodb数据到MySQL数据库 的迁移步骤

    废话少说,直接上干货. 1.mongoexport -d shengyang -c testData -f _id,x,name,name1,name2 --type=csv -o new.csv 用 ...

  7. RECON-NG

    web搜索框架,python开发,与msf命令形式相似. 创建独立的工作区 recon-ng -w sina 可以看到就转到了新建的工作区sina里 为搜索框架指定API key keys add A ...

  8. day15模块内容

    1.生成器表达式 先说三元表达式如下 res = [i for i in range(10) if 1 > 5] 这样res就是一个列表6,7,8,9] 只要在这个基础上稍加调整,如下 方括号改 ...

  9. 在window下搭建Vue.Js开发环境(转)

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...

  10. springboot jpa 审计

    @SpringBootApplication @EnableJpaAuditing public class Application {...} @Component public class Aud ...