Vue 시작하기: Todolist 예제 글로벌 구성 요소 및 로컬 구성 요소 시작하기

입문적인 글로벌 컴포넌트와 로컬 컴포넌트를 이해하기 전에, "컴포넌트화"의 개념이 무엇인지 이해해야 합니다.

컴포넌트화는 컴포넌트 또는 페이지의 일부로 이해될 수 있습니다. 예를 들어 아래 그림에서 빨간색 상자 부분을 컴포넌트로 나눈 다음 데이터를 반복하면 됩니다. 이 구성 요소는 홈 페이지, 목록 페이지 등 어디에서나 사용할 수 있으며 현재 페이지에만 국한되지 않습니다.

우리는 Vue의 글로벌 구성 요소와 로컬 구성 요소를 시작하기 위해 여전히 가장 간단한 할 일 목록을 사용합니다.

를 구성 요소로 사용하고 전역 구성 요소와 로컬 구성 요소가 각각 어떻게 구현되는지 살펴보겠습니다.

글로벌 컴포넌트

<div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>

            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>

    <script>
        Vue.component("TodoItem",{
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        })


        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

Vue.comComponent()를 사용하여 글로벌 컴포넌트를 정의하면 이 컴포넌트를 id="root"뿐만 아니라 현재 페이지에서도 사용할 수 있습니다.

Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
        })

TodoItem은 구성 요소의 이름입니다. HTML에서 은

props를 사용하여 구성 요소 스타일을 정의하거나 템플릿을 정의합니다.

또한 필요합니다.
자식 구성 요소에 값을 전달하는 상위 구성 요소

가 있습니다.

todo-item v-bind:content="item" v-for="item in list"></todo-item>

목록은 상위 구성 요소에 입력되고, todo-item은 하위 구성 요소에 속하며 데이터를 분석해 보겠습니다. 목록에서 반복되는 항목은 전역 구성 요소에 전달되어야 하므로 v -bind:content="item"이 전달됩니다. 여기서 콘텐츠는 하위 구성 요소가 수신한 데이터입니다. 그런 다음 하위 구성 요소가 props:['를 수신하도록 정의됩니다. content'], 다음 템플릿을 사용할 수 있습니다."

{{content}} li>"데이터는 콘텐츠를 사용하여 표시됩니다.

로컬 컴포넌트

동일한 효과를 위해 로컬 컴포넌트를 사용해 보겠습니다.

        

            
            提交
        
        

            
    

    <script>

        var TodoItem={
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

글로벌 컴포넌트와 다른 점은 var TodoItem={}을 통해 로컬 컴포넌트를 정의하고, 정의한 후에는 new Vue

components:{
   'TodoItem':TodoItem
},

에서 선언해야 한다는 점입니다. 그런 다음 로컬 컴포넌트는 id="root"에서만 사용됩니다.

좋아요, 위는 글로벌 구성 요소와 로컬 구성 요소를 시작하고, 승진과 급여 인상을 받고, Vue 기술을 빠르게 익히는 데 도움이 되는 할일 목록 예시입니다!

위 내용은 Vue 시작하기: Todolist 예제 글로벌 구성 요소 및 로컬 구성 요소 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!