VUE组件的创建、渲染、及注册

最新推荐文章于 2023-12-04 10:47:47 发布

_valley

最新推荐文章于 2023-12-04 10:47:47 发布

阅读量302

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55856685/article/details/125091040

版权

本文介绍了Vue组件的创建、注册和渲染过程。首先，通过Vue.extend()创建组件，注意组件不应包含el属性，data应为返回对象的函数。在全局或局部注册组件时，使用Vue.component()。接着，创建Vue实例并指定el属性，配置components以引用组件。组件注册完成后，可在页面中使用组件名作为标签进行渲染。通过这种方式，Vue实例起到了桥梁作用，提高了代码复用性。

摘要由CSDN通过智能技术生成

一、组件的创建

1.1 创建组件用Vue.extend()

1.2 创建的组件不要写el因为最终所有的组件都要被vm管理，由vm决定服务的对象

1.3 date不能写对象形式而是写成函数形式，且其中一定要return一个对象

// 创建一个组件
const school=Vue.extend({
    // 配置template，里面存放的是通过当前组件中的内容生成的标签，最终会作为模板在页面中解析出来
    template:`
            <!--最外层为template必须具有的根标签-->
            <div>
                <!--div中的标签会在页面中使用到该组件的地方解析并显示出来，那么name就是此组件中                    
                  data中配置的name，adress同理-->
                <h1>我的名字:{
  {name}}</h1>
                <h2>地址:{
  {adress}}</h2>
            </div>`,
   // 配置date
      data(){
        return{
            name:'z',
            adress:'earth'            
             }
        }
})

注意：在全局环境下使用Vue.entend({})创建的组件，在不使用Vue.component('组件名',最终组件名)声明时，就是局部组件，不可以被其他vm实例使用，如果使用了Vue.compone