精华内容
下载资源
问答
  • 主要介绍了Vue全局组件与局部组件的区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了基于Vue全局组件与局部组件的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue全局局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> —main.js文件 **main.js...
  • 组件其实也是一个Vue实例,因此它在...全局组件 全局组件的概念 组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。使用方式为<组件名></组件名> 全局组件注册方式 Vue.component('组.
    • 组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等。
    • 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
    • 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
    • data必须是一个函数,不再是一个对象。

    全局组件

    全局组件的概念

    组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。使用方式为<组件名></组件名>

    全局组件注册方式

    Vue.component('组件名',{组件内容})
    

    示例:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>vue组件化</title>
        </head>
        <body>
            <div id="app">
                <span>{{msg}}</span>
                <child-component></child-component>
                <child-component></child-component>
            </div>
        </body>
    </html>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child-component',{
            template:'<h1>我是h1标题</h1>'
        })
        new Vue({
        el: "#app",
        data() {
            return {
                msg:'hello vue'
            }
        }
        })
    </script>
    
    

    运行结果如下图:

    在这里插入图片描述

    注意:

    • 如果我们想要在模板渲染期间使用了组件,但组件的注册在实例化之后会报错,这个原理就类似于我们在使用变量前要进行先注册。会报如下错误:Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

    • 模板里面第一级只能有一个标签,不能并行;也就是要有一个根元素

      <!DOCTYPE html>
      <html lang="en">
          <head>
              <meta charset="utf-8" />
              <title>vue组件化</title>
          </head>
          <body>
              <div id="app">
                  <span>{{msg}}</span>
                  <child-component></child-component>
              </div>
          </body>
      </html>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          Vue.component('child-component',{
              template:'<h1>我是h1标题</h1><h2>我是h2标题</h2>'
          })
          new Vue({
              el: "#app",
              data() {
                  return {
                      msg:'hello vue'
                  }
              }
          })
      </script>
      

      运行结果如下图:
      在这里插入图片描述

      我们发现它只渲染了h1标签,且提示出错。

    局部组件

    局部组件的概念

    全局注册往往是不够理想的。一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。因此,对于一些并不频繁使用的组件,我们会采用局部注册。

    局部组件的注册方式

    局部组件注册方式是直接在Vue实例里面注册

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>vue局部组件</title>
        </head>
        <body>
            <div id="app">
                <span>{{msg}}</span>
                <child-component></child-component>
            </div>
        </body>
    </html>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    msg:'hello vue'
                }
            },
            components:{
                "child-component":{
                    template:'<h1>我是局部组件的标题</h1>'
                }
            }
        })
    </script>
    

    运行结果如下:

    <div id="app">
        <span>hello vue</span> 
        <h1>我是局部组件的标题</h1>
    </div>
    

    注意:

    • 局部组件定义时使用的时components,全局组件注册时Vue.component,多一个s
    • 局部组件在注册的时候因为内容比较复杂,所以建议模板定义在一个全局变量里,代码看起来容易一点
    • 注意局部注册的组件在其子组件中不可用。

    所以经过改良后可以如下:

    <script>
        var childComponent = {
            template:'<h1>我是局部组件的标题</h1>'
        }
        new Vue({
            el: "#app",
            data() {
                return {
                    msg:'hello vue'
                }
            },
            components:{
                "child-component":childComponent
            }
        })
    </script>
    

    关于组件名

    定义组件名的方式有两种:

    • 使用 kebab-case:

      Vue.component('my-component-name', { /* ... */ })
      当使用 kebab-case (短横线分隔命名)定义一个组件时,
      你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。
      
    • 使用 驼峰命名法PascalCase

      Vue.component('MyComponentName', { /* ... */ })
      当使用 PascalCase (首字母大写命名) 定义一个组件时,
      你在引用这个自定义元素时两种命名法都可以使用。
      也就是说 <my-component-name> 和 <MyComponentName>都是可接受的。
      注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
      
      

    所以我们一般建议组件都采用kebab-case这种命名方式。

    展开全文
  • 全局组件与局部组件的跟别区别: 全局组件即在实例外部书写,局部组件在实例内部书写 全局组件: <div id = 'app' v-cloak> <rabbit></rabbit> <rabbit></rabbit> <rabbit&...

    全局组件与局部组件的根本区别:

    全局组件即在实例外部书写,局部组件在实例内部书写

    全局组件:

    <div id = 'app' v-cloak>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    	</div>
    	<script>
    		Vue.component('rabbit',{  			 //实例一个新的组件rabbit标签
    			template:`             		   
    				<div>
    					<button @click = 'onclick()'>{{message}}</button>
    				</div>
    				`, 							//书写组件的配置,html内容
    			data:function(){				//返回组件的数据模型
    				return{
    					message:'rabbit'
    				}
    			},
    			methods:{						//定义组件中用到的事件
    				onclick(){
    					alert('i am rabbit!');
    				}
    			}	
    		})
    		var app = new Vue({
    			el:'#app',
    		})
    

    局部组件:

    <div id = 'app' v-cloak>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    		<rabbit></rabbit>
    	</div>
    	<script>
    		var app = new Vue({  //首先实例化一个div
    			el:'#app',		 
    			components:{	//创建一个新的局部组件rabbit
    				'rabbit':{	
    					template:`	
    						<div>
    							<button @click = 'onclick()'>{{message}}</button>
    						</div>
    						`,	//书写rabbit组件的内容
    					data:function(){
    						return{
    							message:'rabbit'
    						}
    					},		//创建组件中需要用到的数据
    					methods:{
    						onclick(){
    							alert('i am rabbit!');
    						}
    					}		//创建组件中需要用到的事件
    				}
    			}
    		})
    

    这里有一个小的区别,在全局组件中用到的是components,而在局部组件中用到的是component,如果不注意的话就会产生报错。

    数据模型必须是一个带返回参数的函数

    今天初步了解组件,感觉组件其实就是类似于函数,在一整个项目中会用到很多次所以在vue中把组件实例化方便在html中多次使用,可以优化代码,提高可阅读性。

    展开全文
  • 主要介绍了详解vue.js全局组件局部组件,实例分析了全局组件和局部的技巧,有兴趣的可以了解一下。
  • Vue全局组件与局部组件的区别

    千次阅读 2018-06-14 08:37:41
    -- 全局组件模板father模板 --&gt; &lt;template id="father"&gt; &lt;div&gt; &lt;h3&gt;这是{{name}}&lt;/h1&gt; &lt;div&gt; &lt;p&gt;这是{...

    1、组件声明

    <!-- 全局组件模板father模板 -->
    <template id="father">
        <div>
             <h3>这是{{name}}</h1>
             <div>
                 <p>这是{{data}}</p>
             </div>
        </div>
    </template>
    var FATHER = {
        template: "#father",
        data: function() {
             return {
                  name: "一个全局组件-模板-",
                  data: "数据:18892087118"
             }
         }
     };

    2、组件注册

    Vue.component('father', FATHER);

    3、组件挂载

    <h5>全局组件1</h5>
    <father></father>

    4、组件实例

    <!DOCTYPE html>
    <html>
    <head>
        <title>vue2.0 --- 局部组件与全局组件</title>
    </head>
    
    <body>
        <h3>vue2.0局部组件与全局组件</h3>
    
        <div id='app'>
            <h5>局部组件</h5>
            <fatherlocal></fatherlocal>
            <hr>
    
            <h5>全局组件1</h5>
            <father></father>
            <hr>
    
            <h5>全局组件2</h5>
            <child :fromfather='giveData'></child>
        </div>
    
        <!-- 局部组件模板fatherlocal -->
        <template id="father-local">
            <div>
                <h3>这是{{name}}</h1>
                <div>
                    <p>这是{{data}}</p>
                </div>
            </div>
        </template>
    
        <!-- 全局组件模板father -->
        <template id="father">
            <div>
                <h3>这是{{name}}</h1>
                <div>
                    <p>这是{{data}}</p>
                </div>
            </div>
        </template>
    
        <template id="child">
            <div>
                <h3>这是{{name}}</h3>
                <div>
                    <p>{{cmsgtwo}}</p>
                    <p>{{cmsg}}</p>
                    <p>{{fromfather}}</p>
                    <p>{{fromfather.fmsg}}</p>
                    <p><input type="button" value="按钮" @click=" "></p>
                </div>
            </div>
        </template>
    
        <script src="vue_2.2.2_vue.min.js"></script>
        <script type="text/javascript">
            // 定义组件
            var FATHER = {
                template: "#father",
                data: function() {
                    return {
                        name: "一个全局组件-模板-",
                        data: "数据:18892087118"
                    }
                }
            };
    
            var CHILD = {
                template: "#child",
                data: function() {
                    return {
                        name: "子组件",
                        cmsg: "子组件里的第一个数据",
                        cmsgtwo: "子组件里的第二个数据"
                    }
                },
                methods: {
                    change: function() {
                        this.fromfather.fmsg = "子组件数据被更改了"
                    }
                },
                mounted: function() {
                    this.cmsg = this.fromfather;
                },
                props: ["fromfather"],
            };
    
            // 注册组件
            Vue.component('father', FATHER);
            Vue.component("child", CHILD);
    
            var vm = new Vue({
                data: {
                    fmsg: "data里的数据",
                    giveData: {
                        fmsg: "这是父组件里的数据"
                    }
                },
                methods: {},
                // 局部组件fatherlocal
                components: {
                    'fatherlocal': {
                        template: '#father-local',
                        data: function() {
                            return {
                                name: "局部-父组件",
                                data: "局部-父组件里的数据"
                            }
                        }
                    }
                }
            }).$mount('#app');
        </script>
    </body>
    </html>

    6、特殊的属性is

    当使用 DOM 作为模板时 (例如,将 el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素 <ul><ol><table><select>限制了能被它包裹的元素,而一些像 <option>这样的元素只能出现在某些其它元素内部。

    自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:

    <body> 
        <div id="app1"> 
            <ul>   
                <li is="my-component"></li> 
            </ul> 
        </div> 
            
        <script>  
            Vue.component("my-component",{    
                template:"<h1>{{message}}</h1>",    
                data:function(){      
                    return {        
                        message:"hello world"      
                    }    
                }  
            });  
    
            new Vue({    
                el:"#app1"  
                }) 
        </script> 
    </body>

    展开全文
  • 全局组件 js Vue.component('tab-title',{ props:['title'], template:'$emit(\>{{title}}</li>' }) Vue.component('tab-content',{ props:['content'], template:'<div>{{content}}</div>' }) 局部组件demo...
  • vue全局组件与局部组件

    千次阅读 2020-03-15 17:14:27
    今天带领大家敲一个vue组件小案例 vue组件的定义:组件是可复用的 Vue 实例 组件之间是互不影响的,一个组件的崩溃,并不会影响整个项目的运行。 <div id="app"> <!-- vue定义好的组件,可以重复使用·--...

    今天带领大家敲一个vue组件小案例

    vue对组件的定义:组件是可复用的 Vue 实例
    组件之间是互不影响的,一个组件的崩溃,并不会影响整个项目的运行。

    全局组件

    <div id="app">
    <!--    vue定义好的组件,可以重复使用·-->
        <button-add></button-add>
        <button-add></button-add>
    </div>
    <!--引入vue-->
    <script src="vue.js"></script>
    <script>
        // 注册全局对象,要写在vue实例的上面
        Vue.component('button-add', {
            data: function () {
                return {
                    unm: 0
                }
            },
            template: `<button @click="ad">{{unm}}</button>`,
            methods: {
                ad: function () {
                    this.unm = this.unm + 1
                }
            }
        })
        // 创建vue实例
        var vm = new Vue({
            el: '#app'
        })
    </script>
    

    局部组件

    <div id="app">
        <hello-world></hello-world>
    </div>
    <script src="vue.js"></script>
    <script>
        var hello = {
            data: function () {
                return {
                    msg: 'hello world'
                }
            },
            template: `<div>{{msg}}</div>`
        }
        var app = new Vue({
            el: '#app',
            components: {
                'hello-world': hello
            }
        })
    </script>
    
    展开全文
  • vue全局组件局部组件的写法

    千次阅读 2019-02-13 19:34:30
    今天在学习vue的时候遇到了一个让我纠结的地方,那就是vue组件全局注册到底该怎么用,我查阅资料发现众说纷纭……晚上看到了这篇文章,经过实践后发现确实可行,博主采用的比较幽默的方式让我能够对vue组件全局...
  • vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:’ ...
  • 这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 vue全局/局部注册,以及一些混淆的组件main.js入口文件的一些...
  • 组件分全局组件局部组件: 注册组件分三步骤: 1.创建组件构造器 (Vue.extend) 2.注册组件() 3.使用组件() 全局组件局部组件: 下面看一下复杂一点的组件:简单地来说,组件中包含另外一个组件,简称父子...
  • 一、全局组件
  • 主要介绍了VUE注册全局组件局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 组件要注意的事项有: 1、组件的data要用函数,一个组件的 data...Vue.component('组件名',{ template:'&lt;p&gt;这是一个组件里的模板&lt;/p&gt;', //这些都是选项 data:function(){ return{ ...
  • 本篇文章主要介绍了Vue组件之全局组件与局部组件的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 二、 全局组件与局部组件的书写区别 一、全局组件的声明 首先,我按照往常的习惯先声明了 vue,写出来的代码貌似表面上看上去并没有错误,但是它的确是错误的,而且这个错误我找了很久 刚开始的代码 <body&...
  • 主要介绍了详解Vue 动态组件与全局事件绑定总结,从示例中发现并解决问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件–>mtText 使用时–> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,691
精华内容 7,876
关键字:

vue全局组件与局部组件

vue 订阅