Vue组件化的思想

组件化的思想

将一个页面中的处理逻辑放在一起,处理起来就会很复杂,不利于后续管理和扩展。

如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了。

注册组件的基本步骤

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

//创建组件构造器对象
const cpnC = Vue.extend({
      template:`
        <div>
          <h2>hello world</h2>
          <p>hi world</p>
        </div>
      `
})

//注册组件
Vue.component('my-cpn',cpnC)

//使用组件
<div id="app">
    <my-cpn/>
</div>

全局组件

可以在多个Vue的实例下使用
Vue.component('my-cpn',cpnC)

局部组件

仅可以在当前Vue实例下使用

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        mycpn: cpnC
      }
    });

父子组件

<script>
    const cpnC1 = Vue.extend({
      template:`
        <div>
          <h2>我是标题</h2>
          <p>我是内容,哈哈</p>
          </div>
      `
    })

    const cpnC2 = Vue.extend({
      template:`
        <div>
          <h2>我是标题2</h2>
          <p>我是内容2,呵呵呵</p>
          <cpn1/>
        </div>
      `,
      components:{
        cpn1:cpnC1
      }
    })

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        cpn2: cpnC2
      }
    });
  </script>
组件与组件之间存在层级关系

注册全局组件 语法糖

Vue.component('cpn1',{
      template:`
        <div>
          <h2>我是标题</h2>
          <p>我是内容,呵呵呵</p>
        </div>
      `
    })

注册局部组件 语法糖

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        'cpn2' :{
          template:`
          <div>
           <h2>我是标题2</h2>
           <p>我是内容2,呵呵呵</p>
         </div>
         `
        }
      }
    });
省去了调用extend的步骤

组件模板抽离

1.通过script标签,type="text/x-template"
<script type="text/x-template" id="cpn">
  <div>
    <h2>哈哈哈哈哈</h2>
    <p>歪比歪比</p>
  </div>
</script>

<script>
    Vue.component('cpn',{
      template: '#cpn'
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
</script>
1.通过template标签
<template id="cpn">
  <div>
    <h2>哈哈哈哈哈</h2>
    <p>歪比歪比</p>
  </div>
</template>

<script>
    Vue.component('cpn',{
      template: '#cpn'
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
</script>

组件可以访问Vue实例的数据吗?

不能,而且即使可以访问,如果将所有数据都放在Vue实例中,Vue实例会变得非常臃肿

Vue组件应该有自己保存数据的地方
<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>歪比歪比</p>
  </div>
</template>
  <script>
    Vue.component('cpn',{
      template: '#cpn',
      data(){
        return {
          title: 'abc'
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
原文链接:segmentfault.com

上一篇:totop返回顶部
下一篇:vue时间格式与时间戳转换

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    15 小时前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    6 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    20 天前
  • 🌈 React 函数式组件优化

    1. React 性能优化思路 减少重新 render 的次数。 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。

    4 天前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    2 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设置...

    1 年前

官方社区

扫码加入 JavaScript 社区