Vue 데이터 바인딩 방법에 대한 자세한 설명

우리 모두 알고 있듯이 vue는 단방향 데이터 흐름이며 하위 구성 요소는 다음과 같이 상위 구성 요소의 변수를 직접 변경할 수 없습니다. 페이지는 다음과 같습니다.

클릭 후:

위는 하위 구성 요소에 데이터를 전달하는 가장 기본적인 상위 구성 요소입니다. 그러면 상위 구성 요소와 하위 구성 요소를 동기화하려면 어떻게 해야 할까요? 이때

this.$emit() 함수를 사용해야 합니다.

첫 번째 유형: v-model 전송

상위 구성 요소 수정:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        }
    }
</script>

하위 구성 요소 수정:

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

참고: 모델 부분은 생략할 수 없으며, this.$emit에 의해 트리거되는 이벤트입니다. () 입력의 경우(반환 이벤트가 상위 구성 요소에 명시적으로 바인딩되지 않은 경우 입력이 기본값임) 전달된 값은 child

페이지는 다음과 같습니다.

클릭 후:

상위 컴포넌트와 하위 컴포넌트의 값이 동기화된 것을 볼 수 있습니다.

두 번째 유형: 응답 이벤트를 명시적으로 지정(@)

상위 컴포넌트 수정:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>

하위 컴포넌트 수정:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;input&#39;, "child")
            }
        }
    }
</script>

여기서 저는 출력 후에 의도적으로 msg 값을 수정했습니다. 이것이 불가능하다는 것이 밝혀졌기 때문에 출력은 비동기 함수인 것으로 추측됩니다. 이는 대기열 끝에서 실행될 것입니다. 즉, 여기에 할당된 'from children' 값이 최종적으로 덮어쓰여진다는 의미입니다.

this.$emit()의 두 번째 매개변수는 상위 구성요소에 값을 전달할 수 있다는 점을 언급할 가치가 있습니다. 여기서는 직접 체험해 볼 수 있습니다.

페이지는 다음과 같습니다.

클릭 후 :

두 가지 방법 모두 기본적으로 예상한 결과를 얻을 수 있으며, 구체적인 상황에 따라 활용하시면 됩니다

아버지와 아버지 사이의 소통에 대해 이야기 나눈 후. 아들아, 자식과 자식 컴포넌트 사이에 의사소통을 하는 것은 자연스러운 일이다. 사실, 똑똑하다면 어떻게 해야 할지 고민도 하게 됐다. 그렇습니다. 상위 구성 요소를 스프링보드로 사용하여 하위 구성 요소가 통신 효과를 얻을 수 있도록 합니다.
다음은 간단한 예입니다.

상위 구성 요소:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children @upChange="changeMsg" :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号，嘤嘤嘤"
            }
        }
    }
</script>

하위 구성 요소 1:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "给你一个value")
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

하위 구성 요소 2:

<template>
    <p>
        <children @upChange="changeMsg" :msg="msg"></children>
        <children2 :msg2="msg2"></children2>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    import children2 from &#39;@/components/children2&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;,
                msg2: &#39;from parent&#39;
            }
        },
        components: {
            children,
            children2
        },
        methods: {
            changeMsg(value) {
                this.msg = value
                this.changeChild2()
            },
            changeChild2() {
                this.msg2 = "children2收到 children2收到  over over！"
            }
        }
    }
</script>

페이지는 다음과 같습니다.                                                                이후 클릭:

이 기사에서는 Vue 데이터 바인딩 방법에 대한 자세한 설명을 소개합니다. 자세한 내용은 PHP 중국어 웹사이트를 참고하세요. 관련 권장 사항:

간단한 PHP+MySQL 페이징 클래스

재귀가 없는 두 개의 트리 배열 생성자

HTML을 Excel로 변환하고 인쇄 및 다운로드 기능을 실현

위 내용은 Vue 데이터 바인딩 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!