vue 구성 요소 사용
1.구성 요소 인식(1)구성 요 소 를 만 드 는 쓰기 방법:Vue.component(" ",{ //xx });//여 기 는 전역 등록 구성 요소 의 쓰기 방법 Vue.component() 입 니 다.예 를 들 어 Vue.ponent("my-comname",{/xx});그럼 my-comname 은 새 구성 요소 의 이름 입 니 다.
(2)구성 요소 이름 을 정의 하 는 방식:

은 kebab-case(짧 은 횡선 구분 이름)를 사용 합 니 다.Vue.component('my-component-name', { //xx }) 은 이러한 방식 으로 구성 요 소 를 정의 할 때 이 사용자 정의 요 소 를 참조 할 때 도 kebab-case 를 사용 해 야 합 니 다.예 를 들 어 .

은 PascalCase(이니셜 대문자 이름)를 사용 합 니 다.Vue.component('MyComponentName', { //xx }) 은 이러한 방식 으로 구성 요 소 를 정의 할 때 이 사용자 정의 요 소 를 참조 할 때 두 가지 명명 법 을 모두 사용 할 수 있 습 니 다.즉 과 모두 가능 하 다.주의: DOM( ) kebab-case 。

(3)주의:

템 플 릿 에서 사용 할 수 있 도록 이 구성 요소 들 은 Vue 가 식별 할 수 있 도록 먼저 등록 해 야 합 니 다.

DOM 에서 구성 요 소 를 직접 사용 할 때(문자열 템 플 릿 이나 단일 파일 구성 요소 가 아 닌)W3C 규범 에 따 른 사용자 정의 구성 요소 이름(알파벳 은 모두 소문 자 이 며 하나의 연결 문 자 를 포함 해 야 함)을 사용 하여 현재 및 이후 HTML 요소 와 충돌 하지 않도록 하 는 것 을 권장 합 니 다.

은 두 가지 구성 요소 의 등록 유형 이 있 습 니 다. 과 입 니 다.우리 의 구성 요 소 는 모두 Vue.coponent 를 통 해 전역 적 으로 등록 되 어 있 습 니 다.전역 적 으로 등 록 된 구성 요 소 는 등 록 된 후(new Vue 를 통 해)새로 만 든 Vue 루트 인 스 턴 스 를 사용 할 수 있 으 며,구성 요소 트 리 의 모든 하위 구성 요소 템 플 릿 도 포함 합 니 다.

구성 요 소 는 재 활용 가능 한 Vue 인 스 턴 스 이 며 이름 이 있 습 니 다.

<div id="app">
    <button-counter>button-counter>
    <hr>
    <div id="dv" style="width:200px;height:200px;background-color:lightblue;">
        <button-counter>  #dv    button-counter>
    div>
div>

    <script src="js/vue.js"></script>
    <script>
        //     button-counter
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '   {{count}} '
        });

        /*          。         new Vue   Vue    ，
                           。 */
        new Vue({
            el: '#app'
        });
    </script>

2.구성 요소 재 활용 구성 요소 의 재 활용: .주의:

모든 구성 요소 의 data 는 하나의 함수 여야 합 니 다.

구성 요 소 를 사용 할 때마다 새로운 인 스 턴 스 가 생 성 되 고 구성 요소 간 에 서로 영향 을 주지 않 습 니 다.다음 예제 에서 단 추 를 누 르 면 모든 구성 요소 가 각각의 count(클릭 횟수)를 제어 합 니 다.

 <div id="app">
        <button-counter>button-counter>
        <button-counter>button-counter>
        <button-counter>button-counter>
 div>

    <script src="js/vue.js"></script>
    <script>      
        Vue.component("button-counter", {
            //        ,  data                
            // data:{
            //    count:0
            // },

            //       ，     data         
            data: function () {
                return {
                    count: 0
                }
            },
            template:`  {{count}} `
        });
        let app = new Vue({
            el: "#app"
        });
    </script>

3.전역 등록 구성 요소 구성 요 소 는 등록 후 새로 만 든 Vue 루트 인 스 턴 스(new Vue)템 플 릿 에 사용 할 수 있 습 니 다.모든 하위 구성 요소 에서 도 마찬가지 입 니 다.즉,이 세 개의 하위 구성 요 소 는 각자 내부 에서 도 서로 사용 할 수 있 습 니 다.

<div id="app">
    <mycomponet-a>mycomponent-a>
    <mycomponent-b>mycomponent-b>
    <mycomponent-c>mycomponent-c>
div>

    <script src="js/vue.js"></script>
    <script>
        Vue.component('mycomponent-a', {
            data: function () {
                return {
                    poem_title: "  ",
                    poem_name: "《   》-   ",
                    poem_content: "     ，     。     ，     。"
                }
            },
            template: `
{{poem_title}}
{{poem_name}}{{poem_content}}
`
        });

        Vue.component('mycomponent-b', {
            data: function () {
                return {
                    songpoem_title: "  ",
                    songpoem_name:"《   》-   ",
                    songpoem_content:"       ，     ？       ，        ！       ，     。       ？         。"
                }
            },
            template: `
{{songpoem_title}}
{{songpoem_name}}{{songpoem_content}}
`
        });

        Vue.component('mycomponent-c', {
            data: function () {
                return {
                    yuanopera_title: "  ",
                    yuanopera_name:"《   -  》-    ",
                    yuanopera_content:"      ，      ，      。    ，      。"
                }
            },
            template: `
{{yuanopera_title}}
{{yuanopera_name}}{{yuanopera_content}}
`
        });

        new Vue({
            el: '#app',
        })
    </script>

4.부분 등록 구성 요소 의 전체 등록 은 이상 적 이지 않다.예 를 들 어,웹 패키지 같은 프로젝트 를 사용 하 세 요.모든 구성 요 소 를 전역 적 으로 등록 하 는 경우,어떤 구성 요 소 를 사용 하지 않 아 도 최종 패키지 에 포 함 됩 니 다.사용자 가 불필요 한 js 를 다운로드 할 수 있 습 니 다.이것 은 우리 가 부분 구성 요 소 를 등록 해 야 한다. components ， ， 。

 <div id="app">
        <localcom-a message="      ">localcom-a>
        <localcom-b message="         ">localcom-b>
        <localcom-c message="         ">localcom-c>
    div>
    <hr>

    <div id="app2">
        <mycom-x info="   ">mycom-x>
        <mycom-y info="      ">mycom-y>
    div>

    <script src="js/vue.js"></script>
    <script>
        //                 ，           js       ，  ：
        var ComponentA = {
            props: ["message"],
            template: `
{{message}}
`
        }
        var ComponentB = {
            props: ["message"],
            template: `
{{message}}
`
        }
        var ComponentC = {
            props: ["message"],
            template: `
{{message}}
`
        }

        //     components              ：
        let app = new Vue({
            el: '#app',
            components: {
                'localcom-a': ComponentA,
                'localcom-b': ComponentB,
                'localcom-c': ComponentC
            }
        })
        console.log(app);

        //   ：                。
        //   ，    a        ，    ：
        var myComX = {
            props: ["info"],
            template: `
{{info}}
`
        }

        var myComY = {
            components: {
                'mycom-x': myComX
            }
        }
        let app2 = new Vue({
            el: "#app2",
            components: {
                'mycom-x': myComX,
                'mycom-y': myComX
            }
        });
        console.log(app2);


        //         Babel   webpack  ES2015  ,  ：
        // import ComponentA from './ComponentA.vue'
        // export default {
        //     components: {
        //         ComponentA
        //     },
        //     // ...
        // }
        /*  
          ES2015+  ，          ComponentA         ComponentA: ComponentA    ，         ：
                      
                      
        */
    </script>