문서 목록

Vue 구성 요소

구성 요소 베이스

구성 요소 템플릿 분리 쓰기

구성 요소에서 데이터/방법 정의

모/자 어셈블리 통신 전송

부전자:props 속성

props 대소문자 문제

서브넷: 사용자 정의 이벤트

데이터 양방향 귀속 시 서브 부모

모/자 어셈블리 액세스

상위 액세스 하위 ch i l d r e n 및 children 및 children 및 refs

하위 액세스 상위 p a r e n t와parent와parent와root

Vue 슬롯

slot와 slot-scope

Vue 구성 요소
구성 요소 기초
구성 요소화는 하나의 페이지를 하나의 복용 가능한 기능 블록(구성 요소)으로 분해하여 확장과 복용을 편리하게 하는 것이다.
주의: 실제 개발에서 우리는 다음과 같은 방식으로 구성 요소를 개발하지 않고 vue-cli로 생성합니다.vue 템플릿 파일을 개발하는 방법은 구성 요소가 무엇인지 이해하기 위한 것입니다.
어셈블리에 사용되는 세 단계:

구성 요소 구조기 생성: Vue를 호출합니다.extend () 방법, Vue2 이후 extend의 대상을 구성 요소를 등록할 때 전송할 수 있습니다

등록 구성 요소

Vue를 사용합니다.component () 방법으로 전역 구성 요소를 등록하고 모든 Vue 실례를 사용할 수 있습니다

Vue 실례에서 사용components 국부 구성 요소를 등록합니다. 등록된 Vue 실례만 사용할 수 있고 등록된 Vue 실례의 부 실례는 이 국부 구성 요소를 사용할 수 없습니다

구성 요소 사용

국부 구성 요소의 역할 영역 주의

서브어셈블리에서 부모 어셈블리에 직접 액세스할 수 없는 데이터

어셈블리는 재사용 가능한 Vue 인스턴스이며 일반적으로 new에서 나오는 Vue 인스턴스는 루트 어셈블리입니다.

구성 요소 이름 정의 시 낙타봉 명명법을 사용한다면 이름을 사용할 때 단횡선 구분 명명법

으로 변경해야 한다.

각 구성 요소는 루트 요소가 하나여야 합니다

.

<div id="vue">
    <ul>
        
        
        <my-component-li v-for="item in items" v-bind:aaa="item">my-component-li>
    ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
    const cpnc1 = Vue.extend({
      
        template: `
            
    
        `
    })
    //        
    const cpnc2 = Vue.extend({
      
        template: `
            
     
            
        `,
        //          ,
        components:{
      
           cpn1:  cpnc1
        }
    })
    //     cpn1    
    Vue.component('cpn1',cpnc1)
    
    
    //          ,{}    extend   
    Vue.component('my-component-li', {
      
        //   props           ,  v-bind    
        props: ['aaa'],
        //     
        template: '
Hello {
      {aaa}}
'
    });

    var vm = new Vue({
      
        el: '#vue',
        data: {
      
            items: ["  ", "  ", "  "]
        }
    });
    const app= new Vue({
      
        el: '#app',
        //      
        components: {
      
            // cpn         ,cpnc      
            cpn: cpnc2
            //           extend
            cpu2: {
      
                    template: `
                        
     
                        
                    `,
                    components:{
      
                       cpn1:  cpnc1
                    }
                }
        }
    })
script>

구성 요소 템플릿 분리 쓰기

script 태그

//type    text/x-template
<script type="text/x-template" id="cpn">
    <li>Hello</li>
script>

<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
    Vue.component('myli', {
      
        template: '#cpn'
    });
script>

template 레이블

<template id="cpn">
    <li>Helloli>
template>

<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
    Vue.component('myli', {
      
        template: '#cpn'
    });
script>

구성 요소에서 데이터/방법 정의

구성 요소의 데이터는 함수 정의만 사용할 수 있고 대상 정의를 직접 사용할 수 없습니다

데이터는 함수로 정의되어 있기 때문에 같은 구성 요소가 만든 여러 탭 사이의 데이터 데이터는 서로 간섭하지 않습니다

서로 다른 탭의 데이터는 함수를 통해 더미에서 다시 생성됩니다

Vue 실례 외에 변수를 정의하면 데이터 함수에서 직접 되돌아오면 서로 다른 탭 간에 이 변수를 공유한다

<script type="text/javascript">
    Vue.component('myli', {
      
        template: '
{
      {title}}
',
        data(){
      
            return {
      
                title: 'abc'
            }
        },
        //        Vue     
        methods: {
      
            
        }
    });
    
    
    //             data    
    const obj={
      
        count: 0
    }
    Vue.component('myliii', {
      
        template: '
{
      {count}}
',
        data(){
      
            return obj
        }
    });
script>

모/자 어셈블리 통신 전송 값
부모 서브:props 속성

서브어셈블리에서props의 속성을 정의

구성 요소 템플릿에 귀속 속성

탭에서props가 정의한 속성을 전송

하위 구성 요소에서 props 속성의 값을 직접 바꾸는 것을 피하고 하위 구성 요소에서 데이터나 계산 속성을 사용하여 props 속성의 값을 받은 후 양방향 귀속 또는 수정합니다

<div id="vue">
    <ul>
        
        
        <my-component-li v-for="item in items" v-bind:aaa="item">my-component-li>
    ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
    Vue.component('my-component-li', {
      
        //props        
        
        //           
        //props: ['aaa'],
        
        //          ,   ,    
            //         ,        
            //          
        props:{
      
            //      
            aaa: String,
            //         ,   
            bbb: {
      
                type: String,
                default: 'aaaaaa',
                required: true
            }
            cage: Number,
            cpp: {
      
                type: Array,
                default(){
      
                    return []
                }
            },    
            propE: {
      
              type: Object,
              //                    
              default: function () {
      
                return {
       message: 'hello' }
              }
            },
            //        
            propF: {
      
              validator: function (value) {
      
                //                 
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
              }
            }
        }
        template: '
Hello {
      {aaa}}
',
        data(){
      
            return {
      
                //  props  aaa   data
                daaa: this.aaa
            }
        }
    });
    var vm = new Vue({
      
        el: '#vue',
        data: {
      
            items: ["  ", "  ", "  "]
        }
    });
script>

질문
HTML의attribute 이름은 대소문자가 민감하지 않기 때문에 브라우저는 모든 대문자를 소문자로 해석합니다.그래서 낙타봉 명명법의 props명을 사용하려면 그 등가의 단횡선 구분을 사용해야 한다

Vue.component('blog-post', {
  //   JavaScript        
  props: ['postTitle'],
  template: '<h3>{
    { postTitle }}h3>'
})


<blog-post post-title="hello!">blog-post>

하위 상위:사용자 정의 이벤트

하위 구성 요소 템플릿에서 이벤트를 감청하고 발생할 때 하위 구성 요소를 호출하는 방법

서브어셈블리 메서드에서 this.$emit(' ', )를 통해 사용자 정의 이벤트 설정

부모 구성 요소 템플릿은 사용자 정의 이벤트를 감청하고 발생할 때 부모 구성 요소의 방법을 호출합니다

부모 구성 요소 방법에서 부모 구성 요소의 데이터를 조작하여 최종적으로 서브 구성 요소가 부모 구성 요소로 값을 전달하는 과정

에 도달할 수 있다.

<div id="vue">
    
    
    <myarr @itemclick="cpnclick">myarr>
div>

<template id="cpn">
    <div>
        <button v-for="item in items" @click="btnclick(item)">
            {
    {item}}
        button>
    div>
template>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
    Vue.component('myarr', {
      
        template: "#cpn",
        data(){
      
            return{
      
               items: ["  ", "  ", "  "]
            }
        },
        methods: {
      
            btnclick(item){
      
                //            
                console.log(item);
                //              
                this.$emit('itemclick', item)
            }
        }
    });
    var vm = new Vue({
      
        el: '#vue',
        methods: {
      
            cpnclick(item): {
      
                //         
                console.log('cpnclick',item);
            }
        }
    });
script>

데이터 양방향 귀속 시 하위 부모

v-model와v-bind:value 이벤트로 분해하여 데이터의 양방향 귀속에 영향을 주지 않는 전제에서 input 이벤트 호출 방법에 사용자 정의 이벤트를 추가하여 서브 구성 요소가 부모 구성 요소에 값을 전달합니다.주의: 유형 오류가 발생할 수 있습니다. 오류가 발생한 곳에서 스스로 전환하면 됩니다.

사용input+v-model로 v-모델이 데이터의 양방향 귀속을 완성하고watch 감청 데이터가 변할 때 사용자 정의 이벤트를 실행합니다.

props:{
    name: ''
}
data(){
    num: 0
}
// watch   props/data      
    // watch       props/data    
    // watch      ,       
watch:{
    name(newValue,oldValue){
        
    },
    num(newValue){
        
    }
}

모/자 어셈블리 액세스
때때로 우리는 값을 전달하는 통신이 아니라 부자 구성 요소 간에 직접 접근할 수 있어야 한다
상위 액세스 하위 c h i l d r e n 및 children 및 children 및 refs

$children: 모든 하위 구성 요소 가져오기

$refs: 지정된 서브어셈블리 가져오기(일반)

this.$children //        
this.$children[0].   /data    //   /           /   



this.$refs.aaa //        
this.$refs.aaa.name //  aaa    name   

하위 액세스 상위 p a r e n t 및 parent 및 parent 및 root

$parent: 부모 구성 요소 가져오기

$root: 루트 구성 요소 즉 new에서 나온 Vue 실례 가져오기

this.$parent //     
this.$root //     

Vue 슬롯
slot와 slot-scope
Vue에서.js에서 우리는 요소를 분배 내용을 싣는 출구로 사용하는데 저자는 이를 플러그라고 부른다. 조합된 구성 요소의 장면에 응용할 수 있으며 자리 차지 문자에 해당하고 구성 요소의 확장성을 높일 수 있다.

1소켓

Vue.component('chacao', {
    template: '

                   
                   
   
               
'
});



    
    
    

    
        
    1

        
    2

        
    3

     

다중 슬롯,name 지정,서명 슬롯 교체 지정

slot의name 속성 값과 원소의 slot 속성 값이 같을 때 지정한 슬롯을 대체합니다

Vue.component('chacao', {
    template: '

                   
 

                   
 

               
'
});



    
        
      

    

슬롯 역할 도메인:
todo라는 업무 구성 요소를 정의합니다. 이 구성 요소에는 두 개의 플러그인이 설치되어 있습니다. 각각 todo-title과 todo-items입니다.

Vue.component('todo', {
    template: '

                    
                    

                    
                    
               
'
});

todo-title라는 제목 구성 요소를 정의합니다

Vue.component('todo-title', {
    props: ['title'],
    template: '
{
    {title}}
'
});

todo-items라는 업무 내용 구성 요소 정의

Vue.component('todo-items', {
    props: ['item', 'index'],
    template: '
{
    {index + 1}}. {
    {item}}
'
});

초기화

    
        
        
    


var vm = new Vue({
    el: '#vue',
    data: {
        todoItems: ['《    3》', '《             》', '《        》']
    }
});

부모 템플릿의 변수는 부모 구성 요소의 속성을 사용합니다. 위의div는 루트 구성 요소에 속하는 템플릿입니다. 루트 구성 요소에서 변수를 찾지 않고 루트 구성 요소에서 변수를 찾습니다.
slot-scope: 역할 영역 슬롯: 슬롯 교체 내용이 하위 구성 요소의 데이터에 접근할 수 있도록 합니다
부모 구성 요소가 서브 구성 요소 데이터 렌더링 방식에 만족하지 않을 때 서브 구성 요소의 데이터를 가져오면 자동으로 보여 줍니다.

    
        
        
    



Vue.component('todo', {
    template: '

                    
               
',
    data(){
        return{
            todoItems: ['《    3》', '《             》', '《        》']
        }
    }
});

var vm = new Vue({
    el: '#vue'
});