[Front-end development] Vue component-based ideas

Components of thought

The processing logic of a page put together to deal with them will be very complicated, it is not conducive to follow-up management and expansion.

If a page split into small functional blocks, each functional block to achieve their contents, after the management and maintenance of the page becomes very easy.

The basic steps to register components

1. Create the component builder
2. Registration Component
3. Component

//创建组件构造器对象
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>

Global Components

Can be used in multiple instances of Vue
Vue.component('my-cpn',cpnC)

Local assemblies

It can only be used in the current instance Vue

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

Father and son Components

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

There is a hierarchical relationship between components and assemblies

Sign up global components syntactic sugar

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

Sign the local component syntactic sugar

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        'cpn2' :{
          template:`
          <div>
           <h2>我是标题2</h2>
           <p>我是内容2，呵呵呵</p>
         </div>
         `
        }
      }
    });

Eliminating the step of calling extend

Component templates detached

1. script tag, 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 label

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

Components can access data Vue instances it?

Can notAnd even if you can access, if all data on instances Vue, Vue examples will become very bloated

Vue component should have a place of their own to save the data

<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(){}

Why component data must be a function

Component is an enclosed space, each component instance has its own state