Vue 구성 요소 간 가치 전달 강도 분석

Vue를 시작할 때 구성 요소에 대해 언급해야 합니다. 어떤 경우에는 구성 요소가 서로 값을 전달해야 합니다. 예를 들어 상위 구성 요소는 하위 구성 요소에 값을 전달해야 합니다. 그런 다음 강도를 사용하여 자세히 설명해야 합니다.

효과:

우리는 이러한 효과를 얻고 싶습니다. 입력 상자에 텍스트를 입력하고 제출 버튼을 클릭하면 해당 입력 내용이 아래에 나타납니다. 뭔가를 클릭하면 내용이 사라집니다.

아래와 같이 예를 들어 2를 클릭하면 2가 사라집니다

분석:

1 먼저 입력의 입력 내용을 가져와서 모든 입력 내용을 array ,

에서 데이터를 반복합니다.

는 동일한 구조를 갖기 때문에 배열은 상위 레이어에 있고 정의된

하위 구성 요소는 상위 구성 요소가 하위 구성 요소에 값을 전달하고 해당 데이터를 하위 구성 요소에 전달한다는 의미입니다.

2. 옵션을 클릭하면 해당 옵션이 사라집니다. 그런 다음

구성 요소는 상위 구성 요소에 현재 클릭된 항목과 상위 레이어의 배열 데이터 중 어느 항목을 제거해야 하는지 알려줍니다. 이는 값을 전달하는 하위 구성 요소입니다. 상위 구성 요소.

<div id="root">
        
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
        
        <ul>
            <todo-item v-bind:content="item" 
                       v-bind:index="index" 
                       v-for="(item,index) in list"
                       @delete="handleItemDelete"
            ></todo-item>
        </ul>
    </div>

    <script>

        var TodoItem={
            props:[&#39;content&#39;,&#39;index&#39;],
            template:"<li @click=&#39;handleItemClick&#39;>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit(&#39;delete&#39;,this.index);
                }
            }
        }

        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;  //每次提交后清空
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>

코드를 통해 하위 구성 요소가 상위 구성 요소에 값을 전송하는 주요 방법은 다음과 같습니다.

this.$emit('delete',this.index);

또한 Vue에서는 모든 것이 시작된다는 점에 유의해야 합니다. $를 사용하는 것을 vue의 인스턴스 속성 또는 메소드라고 합니다. 이 외에도 Submit ;button @click='handleSubmit'>Submit

관련 추천: "Advanced Javascript Tutorial"

위는 Vue 구성 요소 간의 가치 이전과 급여 인상의 강점에 대한 분석입니다.

위 내용은 Vue 구성 요소 간 가치 전달 강도 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!