foreword

Probably record the components and slots of learning vue

1. Vue components

1. What is a component

The emergence of components is to split the code volume of Vue instances, allowing us to divide different functional modules with different components. In the future, we can call the corresponding components for any functions we need.

The difference between componentization and modularization:

Modularization: It is divided from the perspective of code logic; it facilitates layered development of code and ensures that each functional module has a single function
Componentization: It is divided from the perspective of the UI interface; the componentization of the front end facilitates the reuse of UI components

2. Four creation methods of building

1. Use Vue.extend with Vue.component method:

var login = Vue.extend({
    template: '<h1>登录</h1>'  });  Vue.component('login', login);

2. Use the Vue.component method directly:

Vue.component('register', {
    template: '<h1>注册</h1>'  });

3. Define the template string into the script tag:

<script id="tmpl" type="x-template">
    <div><a href="#">登录</a> | <a href="#">注册</a></div> 
 </script>

At the same time, you need to use Vue.component to define components:

Vue.component('account', {
    template: '#tmpl'  });

4. Define the template string into the template tag:

< template id="tmpl">
    <div><a href="#">登录</a> | <a href="#">注册</a></div> 
 </ template >

At the same time, you need to use Vue.component to define components:

Vue.component('account', {
    template: '#tmpl'  });

Note: Now almost all of them are created using the fourth method, just understand the first three

5. Display data and respond to events in components

The display data in the component is the same as in the vue view layer, the data is wrapped with {{}}, through @binding event,: binding attribute

 <template id="login">
    <div>
    {
   
   {msg}}
    <button @click="add">加加</button>
    </div>
  </template>

The data and methods objects also need to be defined in the component instance, but in the component, data needs to be defined as a method:

Vue.component('login',{
      template:'#login',
      data(){
        return {
          msg:0
        }
      },
      methods:{ 
        add(){
          this.msg++
        }
      }
    })

Two, vue slot

1. What is a slot?

A slot is a placeholder in a child component for the parent component, represented by <slot></slot>, the parent component can fill any template code in this placeholder, such as HTML, components, etc., filled The content will replace the <slot></slot> tags of the child components.

1. The use of slots: put a placeholder in the subcomponent

<template id="course">
        <h2><slot></slot>课程</h2>
</template>

2. Fill the placeholder with content in the parent component:

<div id="app">
			<course>免费</course>
			<course>精品</course>
			<course>限时折扣</course>
		</div>

But there is a problem at this time. If there are multiple slots in the component, only the first slot can be filled, and different values cannot be filled for specific slots. In this case, a named slot is required.

3. Named slots

Named slots are actually giving slots a name. A child component can be placed in multiple slots, and can be placed in different places, and when the parent component fills the content, it can fill the content into the corresponding slot according to the name.

1. The code of the subcomponent sets two slots (header and footer):

<template id="course">
        <h2><slot name="header"></slot>课程</h2>
        <h2><slot name="footer"></slot>课程</h2>
</template>

2. The parent component is filled with content, and the parent component is assigned to the corresponding slot by means of v-slot:[name]

    <div id="app">
		<course>
            <template v-slot:header>
                顶部
            </template>
            <template v-slot:footer>
                底部
            </template>
        </course>
	</div>

vue components and slots