vue 구성 요소 및 슬롯

머리말

아마도 learning vue의 구성 요소와 슬롯을 기록할 것입니다.

1. Vue 컴포넌트

1. 컴포넌트란?

 구성 요소의 출현은 Vue 인스턴스의 코드 볼륨을 분할하여 다른 기능 모듈을 다른 구성 요소로 나눌 수 있도록 하는 것입니다.향후 필요한 모든 기능에 해당 구성 요소를 호출할 수 있습니다.

컴포넌트화와 모듈화의 차이점:

• 모듈화: 코드 논리의 관점에서 구분하여 코드의 계층화 개발을 용이하게 하고 각 기능 모듈이 단일 기능을 갖도록 합니다.

• Componentization : UI Interface 관점에서 구분되며, Front End의 componentization은 UI component의 재사용을 용이하게 함

 2. 건물의 네 가지 생성 방법

1. Vue.component 메서드와 함께 Vue.extend를 사용합니다.

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

 2. Vue.component 메서드를 직접 사용합니다.

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

3. 스크립트 태그에 템플릿 문자열을 정의합니다.

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

 동시에 구성 요소를 정의하려면 Vue.component를 사용해야 합니다.

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

 4. 템플릿 문자열을 템플릿 태그에 정의합니다.

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

동시에 구성 요소를 정의하려면 Vue.component를 사용해야 합니다.

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

참고: 이제 거의 모든 항목이 네 번째 방법을 사용하여 생성됩니다. 처음 세 가지만 이해하면 됩니다. 

5. 데이터를 표시하고 구성 요소의 이벤트에 응답

구성 요소의 표시 데이터는 vue 뷰 레이어와 동일하며 데이터는 @binding 이벤트를 통해 {{}}로 래핑됩니다. 바인딩 속성

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

데이터 및 메서드 개체도 구성 요소 인스턴스에서 정의해야 하지만  구성 요소에서는 데이터를 메서드로 정의해야 합니다.

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

두, vue 슬롯

1. 슬롯이란?

슬롯은 <slot></slot>으로 표시되는 부모 구성 요소에 대한 자식 구성 요소의 자리 표시자이며, 부모 구성 요소는 HTML, 구성 요소 등과 같이 이 자리 표시자의 모든 템플릿 코드를 채울 수 있습니다. 내용이 대체됩니다. 자식 컴포넌트의 <slot></slot> 태그.

1. 슬롯 사용: 하위 구성 요소에 자리 표시자 넣기

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

2. 상위 구성 요소의 콘텐츠로 자리 표시자를 채웁니다.

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

하지만 이때 문제가 있는데 컴포넌트에 슬롯이 여러 개인 경우 첫 번째 슬롯만 채울 수 있고, 특정 슬롯에 대해 서로 다른 값을 채울 수 없는 경우, 네임드 슬롯이 필요하다.

3. 네임드 슬롯

명명된 슬롯은 실제로 슬롯에 이름을 부여합니다. 하위 구성 요소는 여러 슬롯에 배치할 수 있으며 다른 위치에 배치할 수 있으며 상위 구성 요소가 콘텐츠를 채울 때 이름에 따라 해당 슬롯에 콘텐츠를 채울 수 있습니다.

1. 하위 구성 요소의 코드는 두 개의 슬롯(머리글 및 바닥글)을 설정합니다.

 

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

2. 부모 구성 요소는 콘텐츠로 채워지고 부모 구성 요소는 v-slot:[이름]을 통해 해당 슬롯에 할당됩니다. 

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

---