vue의 구성 요소 화 된 개발

vue의 구성 요소 화 된 개발

프론트 엔드를 개발할 때 우리는 모든 비즈니스를 통합했습니다. 그렇게함으로써 나중에 유지 보수 든 확장이든 문제가되는 것처럼 보였고 코드 재사용에 도움이되지 않았습니다. 컴포넌트 기반 개발 모델은 이러한 문제를 해결하기위한 것으로 복잡한 업무 코드를 컴포넌트로 분리하여 페이지를 개발해야 할 때이 컴포넌트를 직접 도입하여 바로 사용할 수 있습니다! .

1. vue 구성 요소의 초기 사용

구성 요소 등록의 세 단계
1. 구성 요소 생성자 만들기 :
template : 나중에 페이지에 표시 할 HTML 템플릿 코드 인 템플릿을 나타냅니다.

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2. 구성 요소 등록 :
매개 변수 1 :이 구성 요소에 지정한 이름, 페이지에서 직접 레이블로 사용할 수 있습니다
매개 변수 2 : 위에서 만든 구성 요소 생성자 개체

/*注册组件*/
    Vue.component('my-cpn',cpn);

3. 구성 요소 사용 :구성 요소는 vue에 마운트 된 태그 아래에 작성되어야합니다. 그렇지 않으면 적용되지 않습니다.

<div id="app">
    <my-cpn></my-cpn>
</div>

이 방법은 구성 요소 개발을 사용하는 가장 원시적 인 방법으로,이 방법은 이후 단계에서 사용되지 않지만 더 간단한 구문 설탕 방법이 개발에 사용됩니다.

2. 전역 구성 요소 및 로컬 구성 요소

Vue.component ()를 호출하여 구성 요소를 등록하면 구성 요소의 등록이 전역 적이므로
모든 Vue 예제에서 구성 요소를 사용할 수 있습니다.

부분 구성 요소를 만드는 방법 :

1. 구성 요소 생성자를 만듭니다.

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2. vue 인스턴스에서 구성 요소 만들기

const vue = new Vue({
        el: "#app",
        data: {},
        /*使用这个对象，创建组件，创建出来的组件只能被挂载在这个实例上的标签内使用*/
        components:{
            "my-cpn": cpn
        }
    })

3. 부모-자식 구성 요소

Vue의 구성 요소 화는 응용 프로그램의 모든 내용을 개별 구성 요소로 추출하고 마지막으로 구성 요소 트리를 형성하는 것임을 알고 있습니다. 그런 다음 부모-자식 구성 요소를 사용해야합니다.

<script>
    /*创建一个子组件*/
    const chile = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是子组件的标题</h1>
                <a href="http://www.baidu.com">点我</a>
            </div>
        `
    })
    /*创建一个父组件*/
    const fu = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是父组件的标题</h1>
                <chile></chile>
            </div>  
        `,
        <!--父组件创建局部的子组件，就可以在父组件的标签内使用了-->
        components:{
     
     
            "chile":chile
        }
    })


    const vue = new Vue({
     
     
        el: "#app",
        data: {
     
     },
        <!--跟组件引入父组件，在引入父组件的时候，父组件就已经编译好了-->
        components: {
     
     
            "my-cpn":fu
        }
    })
</script>

참고 : 상위-하위 구성 요소를 사용할 때 각 템플릿에 루트 태그가 있어야합니다. 그렇지 않으면 오류가보고됩니다. 우리가 부모 컴포넌트를 도입했을 때, 부모 컴포넌트는 이미 파싱되었고 칠레의 라벨은 존재하지 않았고, 부모 컴포넌트가 마침내 사용되었을 때, 부모 컴포넌트는 이미 자식 컴포넌트의 내용을 자체적으로 도입했습니다.

4. 구성 요소 구문 설탕 만들기

위의 구성 요소를 만드는 것은 매우 번거 롭습니다. vue는 구성 요소를 만들기위한 구문 설탕을 제공합니다.

전역 구성 요소에
대한 구문 설탕 : 구성 요소 생성자 등록을 확장하는 단계 생략
구문 :
Vue.component (태그 이름, { 템플릿 : })
html模板代码

로컬 구성 요소에 대한 구문 설탕
구문 :

const vue = new Vue({
       el: "#app",
       data: {},
        /*局部组件的语法糖*/
        components:{
            "标签名":{
                template:`
                    html模板代码
            }
        }
    })

템플릿을 객체로 추출 할 수도 있습니다. 더 간결합니다.

<!--<template id="mytem">
    <a>haha</a>
</template>-->
<script type="text/x-template" id="mytem">
    <a>点我</a>
</script>

위의 두 가지 방법은 템플릿 코드를 추출 할 수 있으며, 필요한 곳에서 ID에 따라 일치시킬 수 있습니다.

全局
Vue.component("my-cpn",{
        template:"#mytem"
    })
局部
components:{
    "my-cpn":{
         template:"#mytem"
     }
}

5. 구성 요소 데이터 저장

구성 요소는 vue 인스턴스의 데이터에 액세스 할 수 없습니다. 구성 요소는 실제로 데이터를 저장할 장소가 있습니다.

模板中使用的数据：
<template id="mytem">
    <h1>{
   
   {message}}</h1>
</template>
可以在模板对象中，定义data：
components:{
    "mycpn":{
         template:"#mytem",
         /*data: function (){
             return {
                 message: "lala"
             }
         }*/
         data(){
             return{
                 message:'papa'
             }
         }
     }
 }

참고 : 여기의 데이터는 함수 여야하고 반환 값은 객체이며 데이터는 객체에 저장됩니다.

6. 부모-자식 데이터

컴포넌트 기반 개발이고 개별 컴포넌트는 vue 인스턴스에서 직접 얻을 수 없기 때문에 하위 컴포넌트가 vue 인스턴스에서 값을 얻으려면 parent to child를 사용해야합니다.

사용되는 주요 것은이 props 속성입니다.
props 속성은 배열 일 수 있습니다. 배열의 문자열은 xxx의 값이며 따옴표로 묶어야합니다.
Pros는 또한 객체가 될 수 있습니다. 객체는 더 많은 기능을 가질 수 있고 유형을 확인할 수 있습니다. 기다려야합니다

아들에서 아버지에게 전달

부모가 자식을 전달하는 상황 외에도 사용자가 한 일을 부모 구성 요소에 알리는 자식 구성 요소도 만날 수 있습니다. 이때 자식을 사용하여 부모를 전달해야합니다 : 이벤트를 통한 알림

슬롯 사용

컴포넌트 기반 개발을 사용하면 다른 페이지에있는 특정 컴포넌트가 동일 할 수 있습니다. 이것은 우리가 많이 쓰고 싶지 않은 컴포넌트입니다. 이때 컴포넌트 템플릿에 슬롯을 쓸 수 있습니다. .

1. 사용할 때 교체 할 슬롯의 내용을 쓰지 않으면 기본 슬롯 내용이 사용됩니다.
2. 슬롯에 이름을 지정할 수도 있습니다. 해당 슬롯을 교체하고 싶을 때 교체 슬롯 슬롯을 지정할 수 있으며 다른 부품은 변경되지 않습니다.