精华内容
下载资源
问答
  • vue全局组件和局部组件的区别
    2022-05-19 15:36:09

    1.组件与实例的关系

    • 在一个Vue项目里面都是由n个实例所组成的,所以每一个组件也是一个实例。
    • 比如以下:在组件里面写一个点击事件也是可以的。
    <div id=root>
    			<div v-text="texts"></div>
    			<input v-model="inputValue" />
    			<button @click="handleClick">提交</button>
    			<ul>
    				<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
    			</ul>
    		</div>
    <script>
    //			全局组件
    			Vue.component('todo-item',{
    				props:['content'],
    				template:'<li @click="handclick">{{content}}<li>',
    				methods:{
    					handclick:function(){
    						alert('hello world')
    					}
    				}
    			})
    </script>

    2.全局组件和局部组件的区别:

    • 全局组件可以在整个模板里面使用。
    • 局部组件只能在挂载点里面使用。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id=root>
    			<div v-text="texts"></div>
    			<input v-model="inputValue" />
    			<button @click="handleClick">提交</button>
    			<ul>
    				<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
    			</ul>
    		</div>
    		<script>
    //			全局组件
    			Vue.component('todo-item',{
    				props:['content'],
    				template:'<li @click="handclick">{{content}}<li>',
    				methods:{
    					handclick:function(){
    						alert('hello world')
    					}
    				}
    			})
    			new Vue({
    				el:"#root",
    				data:{
    					texts:"Hello World",
    					inputValue:'',
    					list:[]
    				},
    				methods:{
    					handleClick:function(){
    						this.list.push(this.inputValue),
    						this.inputValue=''
    					}
    				}
    				
    			})
    //			局部组件
    //			var TodoItem={
    //				template:'<li>item<li>'
    //			}
    //			new Vue({
    //				el:"#root",
    //				components:{
    //					'todo-item':TodoItem
    //				},
    //				data:{
    //					texts:"Hello World",
    //					inputValue:'',
    //					list:[]
    //				},
    //				methods:{
    //					handleClick:function(){
    //						this.list.push(this.inputValue),
    //						this.inputValue=''
    //					}
    //				}
    //				
    //			})
    			
    			
    		</script>
    	</body>
    </html>
    

    更多相关内容
  • 主要介绍了Vue全局组件局部组件区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了基于Vue全局组件局部组件区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue全局组件和局部组件 全局组件 全局组件含义使用方法 全局组件,就是所有 vue 实例中都可以使用的组件 注册全局组件方法如下 我们可以使用 Vue.extend() 函数,也可以不用,直接使用 Vue.component()来创建一个 ...

    Vue全局组件和局部组件

    全局组件

    全局组件含义和使用方法

    全局组件,就是所有 vue 实例中都可以使用的组件

    注册全局组件方法如下

    我们可以使用 Vue.extend() 函数,也可以不用,直接使用 Vue.component()来创建一个 Vue 的构造器

    <div id= "app">
    <my-component></my-component>
    </div>
    <script>
        // 注册
        Vue.component('my-component',{
           template:'<h1>自定义组件</h1>'
        })
        // 创建根实例
        var VM = new Vue({
             el:"#app"
        })
    </script>
    
    局部组件

    1、局部组件含义和使用方法

    我们使用 Vue 对象的 components 属性来实现局部组件注册,顾名思义局部组件就是只能在当前对象中使用的组件

    <div id= "app">
    <my-component></my-component>
    </div>
    <script>
    var child = {
       template:'<h1>自定义组件</h1>'
    }
    // 创建一个根实例
    var VM = new Vue ({
        el:"#app",
        conmponents:{
                 // <my-component>  只在父模板可用
                 'my-component':child
         }
    })
    </script>
    
    展开全文
  • vue全局局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> —main.js文件 **main.js...
  • 全局组件局部组件的跟别区别全局组件即在实例外部书写,局部组件在实例内部书写 全局组件: <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是一个组件化开发的框架,一般我们在项目中使用组件的步骤是这样的。 1.创建一个组件: 比方说我们现在新建一个demo.vue文件,随便写一行代码。 2.使用组件: 在我们需要使用组件的地方,引入...

    全局组件:

    vue中的全局组件指的是可以在应用程序中的任何位置使用的组件,而局部组件指的是未在全局组件中注册的组件,因此只能使用于局部。

    Vue是一个组件化开发的框架,一般我们在项目中使用组件的步骤是这样的。

    1.创建一个组件:

            比方说我们现在新建一个demo.vue文件,随便写一行代码。

    2.使用组件:

     在我们需要使用组件的地方,引入之前写好的组件,并通过components绑定,就可以直接用了。

     

    从上述的例子可以看出,我们使用组件,需要经过引入,绑定两个步骤。那么,如果我们需要使用一些全局组件或者第三方的组件库怎么办呢?

    比如我们要用一些第三方的组件库(以element-ui为例),当然最简单的办法就是直接引用,在idnex.html上或者是我们需要的页面,直接通过link引入。

                                                            截于elemrnt-ui官网

    官网还提供了另一种引入方式(在引用之前需要使用npm安装一下)。 

    现在我们知道了使用组件,有两种方式。一种是引入文件,通过components绑定来使用。另一是引入文件,通过Vue.use()来使用。

    那么自己写的组件,如何通过vue.use()来使用呢?

    1.先创建一个组件

    <template>
        <div>
            {{msg}}
        </div>    
    </template>
    <script>
    export default {
        data() {
            return {
                msg:'loading......'
            }
        }
    }
    </script>
    

    2.在组件的同级目录下,再创建一个idnex.js文件(名字可以随便起)

    import LoadingComponents from './loading.vue';
    
    const loading = {
        install:function(Vue) {
            Vue.component('Loading', LoadingComponents)
        }
    }
    
    export default loading;
    

    3.引入自定义组件,并使用

    import Vue from 'vue'
    import App from './App.vue'
    import loading from './components/loading/'
    
    Vue.use(loading);
    
    new Vue({
      el: '#app',
      data:{
        eventHub: new Vue()
      },
      render: h => h(App)
    })
    
    

    现在就可以在任何地方,直接使用自定义的组件。

    局部组件:

    局部组件:需要在实例化对象中通过components属性进行注册。

    以下均需引入:
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    第1种方法:

    定义模板(script标签 - text / template):

    • 1、直接写在组件里面的 template 属性中。
    • 2、写在 script 标签中,然后在 组件中引用* 这个模板,
    • script 的类型为 text / template ,通过script标签的 id 引用到组件中。

    实例:

    <script type="text/template" id="tm">
        <div>我是写在script标签里面的模板</div>
    </script>
    <script type="text/javascript">
        var test2 = {
            template:"#tm"
        }
        var vm = new Vue({
            el:"#app",
            components:{//注册组件
                test2//定义模板
            }
        })
    </script>
    

    使用:

    <div id="app">
        <test2></test2>
    </div>
    

    第2种方法:

    相比 第1种方法 script 标签 text/template类型而言,其可以弹出提示功能,相当于改善版

    html

    <div id="app">
        <tm></tm>
    </div>
    <template id="tmp2">
        <div>
            <h1>{{msg}}</h1>
        </div>
    </template>
    

    javascript

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    //改善 script标签text/template 引进方法
    Vue.component("tm",{//在html中渲染tm标签
        template:"#tmp2",
        data(){
            return {
                msg:"hello world !"
            }
        }
    })
    var vm = new Vue({
        el:"#app"
    })
    </script>
    

    第3种方法:

    直接定义
    实例:

    <script type="text/javascript">
        var test = {
            template:"<div>{{msg}}</div>",
            data:function(){
                return {
                    msg:"我是局部组件"
                }
            }
        }
        var vm = new Vue({
            el:"#app",
            components:{//注册组件
                test//当键名等于键值的时候 test:test,可以缩写成一个
            }
        })
    </script>
    

    使用:

    <div id="app">
        <test></test>
    </div>
    

    第4种方法:

    间接定义

    <script type="text/javascript">
        var tem = `<div>我是在组件外部定义的模板</div>`,
        var test5 = {
            template:tem
        }
        var vm = new Vue({
            el:"#app",
            components:{//注册组件
                test5
            }
        })
    </script>
    

    使用:

    <div id="app">
        <test5></test5>
    </div>
    

    第5种方法:

    外联inp.js文件

    <script src="js/inp.js"></script>
    //下面是inp.js:
    function inp(){
        var obj = {
            props:["value"],//v-model 绑定数据默认是value
            template:`<div :style="inpBox">
                <input @input="$emit('input',$event.target.value)" :value="value" :style="inp"/>
            </div>`,
            //调用内建的 $emit(事件,) 方法 并传入事件名称来触发一个事件
            data:function(){
                return {
                    inpBox:{
                        display:"inline-block",
                        border:"1px solid #666"
                    },
                    inp:{
                        border:"none",
                        outline:"none",
                        padding:"3px"
                    }
                }
            }
        }
        return obj;
    }
    

    实例化vue

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            components:{//注册组件
                inp:inp(),//inp.js里面定义的函数
            },
            data:{
                message:"hello world"
            }
        })
    </script>
    

    html中使用:

    <div id="app">
        <inp v-model="message"></inp>
        <p>{{message}}</p>
    </div>

    展开全文
  • 主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了详解vue.js全局组件和局部组件,实例分析了全局组件和局部的技巧,有兴趣的可以了解一下。
  • 组件分为:全局组件和局部组件 全局组件在任意的实例、父级组件中都能使用,局部组件只能在创建自己的父级组件或者实例中使用 全局注册组件: Vue.component("zidingyi", { template: `<h1>我是一个全局组件...
  • vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。 1. 全局组件 (1)位置 放在main.js文件中 (2)步骤 定义:components文件夹下定义...
  • 1、Vue.component是Vue提供的创建全局组件的方法。语法:Vue.component("组件名",{}) 2、props:['content'], 【接收传过来的content值】 3、template:"<li>{{content}}</li>"【组件的内容模板,接收内容...
  • 原标题:解析Vue全局组件和局部组件Vue中组件分为两种:1. 全局组件2. 局部组件接下来我们看看两种组件的区别:一、使用范围:全局组件使用范围:可以在页面中任何位置使用局部组件使用范围:只能在定义它的el中使用...
  • vue全局组件和局部组件的写法

    万次阅读 2018-04-18 10:33:45
    vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件全局组件引入写法:在项目的main.js中:import Vue from 'vue'; import MyComponent ...
  • Vue中的组件指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。 全局组件Vue官方文档中介绍的是使用Vue.component(tagName...
  • 全局/局部组件、单文件组件、组件的属性、全局样式、局部样式、组件基础面试题
  • 局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件–>mtText 使用时–> ...
  • 在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用...以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  • 下面小编就为大家分享一篇vue 组件 全局注册和局部注册的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用...以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  • 组件Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章主要介绍了vue组件全局局部,动态加载组件),需要的朋友可以参考下
  • Vue全局组件局部组件 ** Vue中的组件与普通语言中的变量类似有局部变量也有全局变量,限制条件也是相同的 在注册组件的时候是在new Vue({})外面注册的话,是全局组件,也就表示任何一个vue实例对象都可以使用 ....
  • 自定义组件分为全局自定义组件局部自定义组件,全局组件可以全局使用不需要在使用的页面引入, 局部组件仅限当前引入页面 全局自定义组件 写好组件在main文件直接引入,这种是最简单的方式 import ...
  • 全局组件(global components) 是能在整个Vue app的任意模板内使用的组件,在main.js 内调用 component( ) 方法注册的组件都是全局组件: import { createApp } from 'vue'; import App from './App.vue'; import ...
  • 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 2 3 4 5 ... 20
收藏数 25,583
精华内容 10,233
热门标签
关键字:

vue全局组件和局部组件的区别