[前端开发]Vue组件化的思想

亡梦爱人 提交于 2020-03-23 13:27:38

组件化的思想

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

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

注册组件的基本步骤

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></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></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>

data(){}

为什么组件中data必须是函数

组件是一个封闭的空间,每一个组件实例都有自己的状态
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!