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-cli3.0创建项目+引入element-ui

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

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

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

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    10 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 个月前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀虽小五脏俱全的Vue拉勾项目,看看应该有帮助

    全栈系列Vue版拉勾,客官们来瞧瞧 模拟拉勾app系列vue前端界面 github地址,来猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本项目...

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个(https://www.shixincube.com/) 继上一个im聊天组件增加了发动语音,语音...

    1 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 ...

    1 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件...

    2 年前

官方社区

扫码加入 JavaScript 社区