Vue 0부터 시작하는 Vue 구성 요소

문서 목록
  • 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-modelv-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' });

    좋은 웹페이지 즐겨찾기