vue2笔记（三）组件化开发

最新推荐文章于 2022-08-29 11:17:01 发布

VIP文章萝卜北l

最新推荐文章于 2022-08-29 11:17:01 发布

阅读量735

点赞数

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

本文链接：https://blog.csdn.net/luobobei/article/details/120378691

版权

组件化开发

什么是组件化？

面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。

而组件化的思想也类似：

如果我们实现一个页面结构和逻辑非常复杂的页面时，如果全部一起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。
但如果我们这时候把页面分成一个个小的功能块，每个功能块能完成属于自己这部分独立的功能，那么整个页面之后的维护和迭代也会变得非常容易。
组件化开发的优势：可维护性高可复用性高

Vue组件化思想

组件化是Vue重要的思想

它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
组件化思想的应用开发：

有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。

全局组件

通过Vue.component(‘组件名称’, {})，通过这个方法注册的都是全局组件，也就是他们再注册之后可以用在任何新创建的Vue 实例挂载的区域内。

<body>
  <div id="app">
    <my-con></my-con>
    <div>
      <my-con></my-con>
    </div>
  </div>
  <my-con></my-con>
</body>
<script>
  Vue.component('my-con', {
     
    template: '<section><h3>组件标题</h3><p>组件内容</p></section>'
  })
  const vm = new Vue({
     
    el: '#app'
  })
</script>

上面案例中，在<div id="app">...</div> 外的组件 my-con 没有替换成组件真正的页面结构，是因为 new Vue() 挂载在 id=app 的节点上，不在这个节点上标签，不会受到Vue的影响。

局部组件

通过 Vue.component 方式注册的组件，称之为全局组件。任何地方都可以使用。全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

注册局部组件

<body>
  <div id="app">
    <my-con></my-con>
    <div>
      <my-con></my-con>
    </div>
  </div>
  <div id="app1">
    <my-con1></my-con1>
  </div>
</body>
<template id="template1">
  <section>
    <h3>组件标题</h3>
    <p>组件内容</p>
  </section>
</template>
<template id="template2">
  <section>
    <h3>组件标题B</h3>
    <p>组件内容B</p>
  </section>
</template>
<script>
  var componentA = {
     
    template: '#template1'
  }

  var componentB = {
     
    template: '#template2'
  }
  const vm = new Vue({
     
    el: '#app',
    components: {
     
      'my-con': componentA
    }
  })
  const vm1 = new Vue({
     
    el: '#app1',
    components: {
     
      'my-con1': componentB
    }
  })
</script>

父组件和子组件

组件和组件之间存在层级关系，而其中一种最重要的关系就是父子组件关系。

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

那组件如果要使用data定义自己属性保存数据要怎么做呢？

组件对象也有一个data的属性（也有methods等属性，下面我们有用到）

只是这个data属性必须是一个函数，而且函数返回一个对象，对象保存着数据

<body>
  <div id="app">
    <my-con></my-con>
    <div>
      <my-con></my-con>
    </div>
  </div>
  <div id="app1">
    <my-con1></my-con1>
  </div>
</body>
<template id="template1">
  <section>
    <h3>{
  {title}}</h3>
    <p>组件内容</p>
  </section>
</template>
<template id="template2">
  <section>
    <h3>{
  {title}}B</h3>
    <p>组件内容B</p>
    <aa></aa>
  </section>
</template>
<script>
  var componentA = {
     
    template: '#template1',
    data() {
     
      return {
     
        title: 'zujianbiaoti'
      }
    }
  }

  var componentB = {
     
    template: '#template2',
    data() {
     
      return {
     
        title: 'zj'
      }
    },
    components: {
     
      'aa': {
     
        template: '<div>aa</div>'
      }
    }
  }
  const vm = new Vue({
     
    el: '#app',
    data: {
     title: '组件标题'},
    components: {
     
      'my-con': componentA
    }
  })
  const vm1 = new Vue({
     
    el: '#app1',
    components: {
     
      'my-con1': componentB
    }
  })
</script>

为什么data在组件中必须是一个函数呢？

原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

父子组件间的通讯

父级向子级传递
在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

字符串数组，数组中的字符串就是传递时的名称。
对象，对象可以设置传递时的类型（String，Number，Boolean，Array， Object，Date，Function，Symbol），也可以设置默认值等。

<body>
  <div id="app1">
    <my-con1></my-con1>
  </div>
</body>

<template id="template2">
  <section>
    <h3>{
  {title}}B</h3>
    <p>组件内容B</p>
    <!-- my-con1组件内的aa组件 --> 
    <aa v-bind:parent-txt="childtxt"></aa>
  </section>
</template>
<script>

最低0.47元/天解锁文章

萝卜北l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2笔记（三）组件化开发

组件化开发(来源csdn博主「程序猿玖月柒」)原文链接：https://blog.csdn.net/weixin_45257157/article/details/113705867什么是组件化？面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。而组件化的思想也类似：如果我们实现一个页面结构和逻辑非常复杂的页面时，如果全部一起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。但如果我们这时候把页面分成一个个小的功能块，每个功能块能完成属
复制链接

扫一扫