Vue에서 상위 구성요소의 데이터를 하위 구성요소로 전달하는 방법

이 기사에서는 vue에 대한 관련 지식을 제공합니다. 소품 및 이벤트, 참조 속성, 제공 및 주입 등을 포함하여 Vue의 상위 구성 요소와 하위 구성 요소 간에 데이터를 전달하는 여러 가지 방법을 주로 요약합니다. 아래의 참고 값이 모든 사람에게 도움이 되기를 바랍니다.

[관련 권장 사항: javascript 비디오 튜토리얼, vue.js 튜토리얼]

최근 vue의 소스 코드를 연구하면서 vue에서 상위 컴포넌트와 하위 컴포넌트 간에 데이터를 전달하는 여러 가지 방법을 요약했습니다. .

1.props & event

상위 컴포넌트는 props 데이터를 하위 컴포넌트에 전달하고, 하위 컴포넌트는 이벤트를 트리거하여 상위 컴포넌트에 데이터를 반환합니다.

//子组件 
<template>
    <div @click="changeName(&#39;YYY&#39;)">{{name}}</div>
</template>
<script>
export default{
    props:[&#39;name&#39;],//or props:{name:{type:String,default:&#39;&#39;}}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit(&#39;changeName&#39;,newName)
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        data(){
            return {name:&#39;XXX&#39;}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>

위 내용은 완료되었습니다. 프로세스. 상위 구성 요소는 하위 구성 요소에 전달된 props를 통해 데이터를 전달하고, 하위 구성 요소는 이벤트를 트리거하며, 이는 상위 구성 요소에 의해 모니터링되고 그에 따라 처리됩니다.

2.ref

ref 속성은 하위 구성 요소 또는 기본 DOM에 정의될 수 있습니다. 하위 구성 요소에 있는 경우 기본 DOM에 있는 경우 기본 DOM 요소를 가리킵니다. (요소 선택에 사용할 수 있습니다. querySelector의 문제를 해결하세요.)

데이터 전달 아이디어: 상위 구성 요소의 ref를 통해 하위 구성 요소 인스턴스를 가져온 다음 하위 구성 요소 메서드를 호출하고 해당 데이터를 매개 변수로 전달합니다. 코드는 다음과 같습니다.

//子组件 
<template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:&#39;&#39;
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg(&#39;Parent Message&#39;);
            }
        }
    }
</scritp>

3.provide & inject는 프로덕션 환경에서 공식적으로 사용을 권장하지 않습니다.

provide는 제공 수단을 제공하는 경우 해당 하위 구성 요소는 inject를 사용하여 주입을 허용할 수 있습니다. 상위 구성 요소에서 전달된 데이터를 사용합니다. 코드는 다음과 같습니다:

//child
<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:[&#39;appName&#39;]
}
</script>
 
// root 
export default{
    data(){
        return {
            appName:&#39;Test&#39;
        }
    },
    provide:[&#39;appName&#39;]
}

[관련 권장 사항: javascript 비디오 튜토리얼, vue.js 튜토리얼]

위 내용은 Vue에서 상위 구성요소의 데이터를 하위 구성요소로 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!