Vue全局组件和局部组件的注册

m0_60496430 2023-07-17 原文

组件的简介：

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：

组件的基本使用：

创建一个Vue实例需要创建后才能使用，组件也需要进行注册后才能使用。注册组件分为全局注册和局部注册两种方式。

全局注册：

1.注册全局组件

注册组件就是利用Vue.component() 方法，先传入一个自定义组件的名字，然后传入这个组件的配置

//定义一个名为 my-component 的新组件

Vue.component('my-component'),{

//组件内容写在这里

template:" <lable>自己的组件</lable> "

注："" 不支持换行，使用模板字符串支持换行 ` `

})

如上方式，就说明创建了一个自定义组件，然后可以在Vue实例挂在DOM元素中使用它。

<my-cpmponent></my-component>

</div>

//定义一个名字为my-component的组件

Vue.component('my-component',{

//组件内容写这里

template:"<lable>自己的组件</lable>"

})

//声明一个vue实例

var vm = new Vue({

el:"#app",

)}

</script>

归纳总结：

创建全局组件时，应该使用Vue对象的component方法，这个方法接收两个参数。第一个字符串：表示组件名称，第二个为一个对象：表示组件内容
组件要渲染的内容应该写在template选项中，作为其值进行处理
注册时，推荐组件名称为【小写加分隔符链接的形式】，类似于css属性名的写法
组件全局注册后，在任何vue实例中都可以使用，但前提是相关vue实例应该在注册后在声明
组件在使用时，应该以标签形式调用

2.全局组件的进阶使用

（一）组件复用性的基本体现：定义后的组件可以通过标签多次调用

<div id="app">
    <my-component></my-component><!-- 以标签形式使用组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<script>
    // 定义一个名为 my-component 的新组件
    Vue.component('my-component', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    })
</script>

（二）组件的template选项

注意：组件中的template只能有一个根元素。下面的情况是不允许的：

template: `<div>这是一个全局组件</div>
            <button>hello</button>`,

如果外层有多个根元素，那么就只会渲染第一个根元素

（三）全局组件可以在其注册后创建的所有vue实例中使用

<div id="app">	<!-- 在第一个vue实例中调用全局组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<div id="app1">	<!-- 在第二个vue实例中调用全局组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<script>
    // 定义一个名为 my-component 的新组件
    Vue.component('my-component', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    });
    var vueApp = new Vue({
        el: '#app1',
    });
</script>

（四）全局组件一定要在所有vue实例创建之前注册定义

<div id="app">
    <p>我是第一个div</p>
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<div id="app1">
    <p>我是第二个div</p>
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<script>
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    });
     // 定义一个名为 my-component 的新组件
     Vue.component('my-component', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    var vueApp = new Vue({
        el: '#app1',
    })
</script>

（四）全局组件一定要在所有vue实例创建之前注册定义

<div id="app">
    <p>我是第一个div</p>
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<div id="app1">
    <p>我是第二个div</p>
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<script>
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    });
     // 定义一个名为 my-component 的新组件
     Vue.component('my-component', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    var vueApp = new Vue({
        el: '#app1',
    })
</script>

③组件内容中的其他选项

（一）组件中的data必须是函数

可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了

<body>
<div id="app">
    <p>我是第一个div</p>
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component', {
        //组件内容写这里
        template: "<div>{{message}}</div>",
    })
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
        data:function(){
            return{
                message:'这是一个全局组件',
            }
        }
    });
</script>

局部注册

注册局部组件

Vue实例中有个选项components可以注册局部组件，注册后就只在该实例作用域下有效

<div id="app">
    <my-component></my-component>
</div>
<script>
    var vueApp = new Vue({
        el: '#app',
        components: {
            'my-component': {
                template: '<div>{{message}}</div>',
                data: function () {
                    return {
                        message: '这是一个局部组件',
                    }
                }
            }
        }
    });
</script>

效果演示

（一）组件中嵌套

<div id="app">
    <my-component></my-component>	
</div>
<script>
    var vueApp = new Vue({
        el: '#app',
        components: {
            'my-component': {
            	//调用该局部组件下的局部组件<next-component>
                template: '<div>{{message}}<next-component></next-component></div>',
                data: function () {
                    return {
                        message: '这是一个局部组件',
                    }
                },
                components:{
                    'next-component':{
                        template:'<div>这是局部组件下的局部组件</div>'
                    }
                }
            }
        }
    });
</script>

效果图

可以在组件的components选项中声明多个组件，在components中：每个组件都是一个键值对。键名为组件名，键值为组件内容

（二）在组件中定义子组件时，可以使用外部定义对象作为组件内容

<div id="app">
    <my-component></my-component>
</div>
<script>
    var obj1 = {
        template:`<div>我是第一个子div</div>`
    }
    var obj2 = {
        template:`<div>我是第二个子div</div>`
    }
    Vue.component('my-component',{
        template:`<div>
                    <sub1></sub1>
                    <sub2></sub2>
                  </div>`,
        components: {
            sub1:obj1,
            sub2:obj2
        }
    })
    var vueApp = new Vue({
        el: '#app',
    });
</script>

效果图

（三）组件调用时可以直接使用单标签形式

<div id="app">
<person-message></person-message>
<person-message/>
</div>

当用单标签多次调用同一组件，只会产生组件一次

和局 Vue component my-component gt vue.js 前端 javascript

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

计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
阿里云国际版免费试用：如何注册以及注意事项 - 2
作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐
ruby-on-rails - 设计注册确认 - 2
我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中，我没有任何确认。在我的用户模型中，我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:
ruby - 在 RSpec 中 stub /模拟全局常量 - 2
我有一个gem，它有一个根据Rails.env的不同行为的方法:defself.envifdefined?(Rails)Rails.envelsif...现在我想编写一个规范来测试这个代码路径。目前我是这样做的:Kernel.const_set(:Rails,nil)Rails.should_receive(:env).and_return('production')...没关系，只是感觉很丑。另一种方法是在spec_helper中声明:moduleRails;end而且效果也很好。但也许有更好的方法？理想情况下，这应该有效:rails=double('Rails')rails.sho
ruby - 将全局 $stdout 重新分配给控制台 - ruby - 2
我正在尝试将$stdout设置为临时写入一个文件，然后返回到一个文件。test.rb:old_stdout=$stdout$stdout.reopen("mytestfile.out",'w+')puts"thisgoesinmytestfile"$stdout=old_stdoutputs"thisshouldbeontheconsole"$stdout.reopen("mytestfile1.out",'w+')puts"thisgoesinmytestfile1:"$stdout=old_stdoutputs"thisshouldbebackontheconsole"这是输出。r
ruby - 在模块/类之间共享全局记录器 - 2
在许多ruby类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？最佳答案在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..
ruby - Sinatra 中的全局救援和日志记录异常 - 2
如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si
ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2
我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？最佳答案当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje
ruby-on-rails - 特征未注册 : attribute name - 2
完成这个有困难。我正在使用seed.rb+factory_girl来使用rakedb:seed填充数据库。(我知道固定装置存在，但我想以这种方式完成，这只是一个示例，数据库将填充复杂的关联对象。)我的种子.rb:require'factory_girl_rails'["QM","CDC","SI","QS"].eachdo|n|FactoryGirl.create(:grau,nome:n)end还有我的/factories/graus.rbFactoryGirl.definedofactory:graudonomeendend但是当我运行时:rakedb:seed我得到:rakeab
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

Vue全局组件和局部组件的注册

局部注册

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

随机推荐