[front end development] the idea of Vue componentization

The idea of componentization

Put the processing logic of a page together, and it will be very complex, which is not conducive to subsequent management and expansion.

If the page is divided into small function blocks, each function block realizes its own content, then the management and maintenance of the page becomes very easy.

Basic steps for registering components

1. Create component builder
2. Register components
3. Use components

//Create component builder object
const cpnC = Vue.extend({
      template:`
        <div>
          <h2>hello world</h2>
          <p>hi world</p>
        </div>
      `
})

//Registration component
Vue.component('my-cpn',cpnC)
    
//Use components
<div id="app">
    <my-cpn></my-cpn>
</div>

Global component

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

Local components

Can only be used under the current Vue instance

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

Father son component

<script>
    const cpnC1 = Vue.extend({
      template:`
        <div>
          <h2>I am the title.</h2>
          <p>I am the content, ha ha</p>
          </div>
      `
    })

    const cpnC2 = Vue.extend({
      template:`
        <div>
          <h2>I'm Title 2</h2>
          <p>I am content 2, hehe</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

Register global component syntax sugar

Vue.component('cpn1',{
      template:`
        <div>
          <h2>I am the title.</h2>
          <p>I am the content, hehe</p>
        </div>
      `
    })

Register local component syntax sugar

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        'cpn2' :{
          template:`
          <div>
           <h2>I'm Title 2</h2>
           <p>I am content 2, hehe</p>
         </div>
         `
        }
      }
    });
Omit calling extend

Component template extraction

1. By script tag, type="text/x-template"
<script type="text/x-template" id="cpn">
  <div>
    <h2>Ha ha ha ha ha ha ha</h2>
    <p>Skew ratio</p>
  </div>
</script>

<script>
    Vue.component('cpn',{
      template: '#cpn'
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
</script>
1. Through the template tag
<template id='cpn'>
  <div>
    <h2>Ha ha ha ha ha ha ha</h2>
    <p>Skew ratio</p>
  </div>
</template>

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

Can components access the data of Vue instances?

No, and even if you can access it, if you put all the data in the Vue instance, the Vue instance will become very bloated

Vue components should have their own place to store data
<template id='cpn'>
  <div>
    <h2>{{title}}</h2>
    <p>Skew ratio</p>
  </div>
</template>
  <script>
    Vue.component('cpn',{
      template: '#cpn',
      data(){
        return {
          title: 'abc'
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

data(){}

Why data in a component must be a function

Component is a closed space, each component instance has its own state

Tags: Javascript Vue

Posted on Mon, 23 Mar 2020 12:53:04 -0400 by Ashoar