초급자는 Vue를 사용합니다.js[구성 요소 간의 통신]

12611 단어 Vue.js

입문


이번엔 Vue야.자신의 방식으로 js의 구성 요소 간의 통신을 총결하다.
Vue입니다.js의 참고서에서 높은 평가기본에서 Vue를 학습합니다.js를 받았습니다. 읽으면서 공부하지만 저한테는 좀 어려워요. 잊어버린 기록을 추가하지 않으면 나중에 또 이해가 안 돼서 이번에 정리했습니다.
이번에도 VScode를 사용하겠습니다.

구성 요소


기업 등의 홈페이지를 보면 머리글, 꼬리말, 사이드바 등 몇 개의 부품으로 구성되어 있음을 알 수 있다.이 부품들은 매 페이지에 같은 것을 사용하는데, 매 페이지에 같은 코드를 쓰는 것은 매우 번거롭다.이러한 상황에서 각 부품을 어셈블리에 저장하여 공유를 통해 개발, 유지보수의 효율을 높인다.

완성 코드


index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" class='box'>
        <my-component></my-component>
        <comp-child></comp-child>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
Vue.component('my-component',{
    template:'<p><comp-child v-bind:val="message"></comp-child></p>',
    data:function(){
        return{
            message:'コンポーネント'
        }
    },
    props:['val']
})
Vue.component('comp-child',{
    template:'<p>{{message}}{{val}}</p>',
    data:function(){
        return{
            message:'コンポーネント２'
        }
    },
    props:['val']
})

  new Vue({
    el:'#app',
    data: {

    }
  })

실행 결과



해설


다음 코드를 주의하십시오.Vue 인스턴스로 마운트된 div 태그에는 <my-component v-bind:val="message"></my-component> 및 <comp-child></comp-child> 이 있습니다.이 태그에 기술된 my-component와comp-child는 구성 요소의 이름입니다.
index.html
<div id="app" class='box'>
        <my-component></my-component>
        <comp-child></comp-child>
</div>
이 구성 요소의 내용은 Vue입니다.js로 정의합니다.
아래를 보세요.
main.js
Vue.component('my-component',{
    template:'<p><comp-child v-bind:val="message"></comp-child></p>',
    data:function(){
        return{
            message:'コンポーネント'
        }
    },
    props:['val']
})
Vue.component('comp-child',{
    template:'<p>{{message}}{{val}}</p>',
    data:function(){
        return{
            message:'コンポーネント２'
        }
    },
    props:['val']
})
정의 내용이 어떤지 봅시다.
Vue.어셈블리 이름\"{
template:'html에서 그릴 내용',
　　　data:function(){
　　　　　　return{
속성:데이터
　　　　　　}
　　　},
props: 부모 구성 요소에서 받은 값
})
구성 요소 이름···html에서 탭으로 호출할 때template를 묘사합니다.
template·html에 묘사된 내용.원소는 반드시 단일해야 한다.
데이터···vue 실례 내의 데이터에 비해 함수로 되돌아오는 것을 주의하십시오.
상위 구성 요소에서 받은 데이터

컴차일드 봐.


index.html
<comp-child></comp-child>
html의 구성 요소 호출.
main.js
Vue.component('comp-child',{
    template:'<p>{{message}}{{val}}</p>',
    data:function(){
        return{
            message:'コンポーネント２'
        }
    },
    props:['val']
})
template의 p 표시에'message'가 있기 때문에 데이터에 있는 message 속성의 데이터를 그리고 있습니다.{val}props의val을 보고 있지만 val에 데이터가 없습니다.
실행 결과와 같이 어셈블리 2만 내보냅니다.

my-component 봐.


index.html
<my-component></my-component>
아까와 같이 구성 요소를 호출합니다.
main.js
Vue.component('my-component',{
    template:'<p><comp-child v-bind:val="message"></comp-child></p>',
    data:function(){
        return{
            message:'コンポーネント'
        }
    },
    props:['val']
})
html에서 구성 요소를 호출했기 때문에template를 묘사하고 있으나,comp-child 구성 요소도 호출했습니다.따라서 my-component를 호출하는 동시에comp-child라고도 부른다.그 밖에 v-bind:val="message" 데이터의 메시지 속성을 사용하여 데이터를comp-child에 전달합니다.
호출된comp-child 구성 요소를 다시 돌아보면
main.js
Vue.component('comp-child',{
    template:'<p>{{message}}{{val}}</p>',
    data:function(){
        return{
            message:'コンポーネント２'
        }
    },
    props:['val']
})
props의val에서 방금 전달한 데이터를 받아template에서'val'로 사용합니다.결과적으로 실행 후comp-child와 my-component의 데이터가 모두 표시됩니다.

마지막


언뜻 보기에는 어려운 것 같지만 스스로 코드를 쓰면 간단한 제작은 이해하기 쉽다.
비록 기본적이지만, 나는 프로그래밍 학습을 덮어놓고 손만 대는 것이 매우 중요하다고 생각한다.
이것을 읽은 사람도 코드를 복사해서 스스로 이동해 보라고 건의했다.

지원


상술한 소개에 대한 기초는 쓰여 있지만, 내용은 처음 듣는 단어가 매우 많다
나는 초급자에게 매우 어렵다고 생각한다.온라인 동영상에서 기초를 쉽게 배운 후에 구매하는 것을 권장합니다.
고전 면접 문제의 귀속 호출 몇 가지 고전 예시
Kubernetes: Kubernetes 작업 및 Helm hook을 사용하여 SQL 마이그레이션 실행

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage