vue组件化(一)

最新推荐文章于 2024-01-08 20:44:45 发布

SpaceX7_s

最新推荐文章于 2024-01-08 20:44:45 发布

阅读量1.4k

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_45842954/article/details/123784181

版权

什么是组件化

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好
在这里插入图片描述

组件的使用分成三个步骤：

1.创建组件构造器
2.注册组件
3.使用组件

在这里插入图片描述

1Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

2.Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

<body>
    <div id="app">
     <my-cpn></my-cpn>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
      //1.创建组件构造器对象
      const cpnC = Vue.extend({
   
        template: `
        <div>
          <h2>我是标题</h2>
          <h3>我是内容，哈哈哈哈</h3>
          <h3>我是内容，呵呵呵呵</h3>
          </div>
        `
      })
      //注册组件
      // 两个参数 1.组件标签名，2.组件构造器对象
      Vue.component('my-cpn',cpnC)
    const app = new Vue({
   
      el: '#app',
      data:{
   }
    })
    </script>
  </body>

父子组件

<body>
    <div id="app">
       <cpn2></cpn2>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
    // 子组件
    const cpnC1 = Vue.extend({
   
      template: `
      <div>
          <h2>我是标题1</h2>
          <h3>我是内容，哈哈哈哈</h3>
          <h3>我是内容，呵呵呵呵</h3>
          </div>
      `
    })
    // 父组件
    const cpnC2 = Vue.extend({
   
      template: `
          <div>
          <h2>我是标题2</h2>
          <h3>我是内容，哈哈哈哈</h3>
          <h3>我是内容，呵呵呵呵</h3>
          <cpn1></cpn1>
          </div>
      `,
      components: {
   
        cpn1: cpnC1

最低0.47元/天解锁文章

SpaceX7_s

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue组件化(一)

什么是组件化所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好组件的使用分成三个步骤：1.创建组件构造器2.注册组件3.使用组件1Vue.extend()：调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板就是
复制链接

扫一扫