vue에서 상위 구성 요소의 데이터를 하위 구성 요소로 전달하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-14 13:51:52

원래의

2746명이 탐색했습니다.

이 글에서는 Vue 상위 컴포넌트에서 하위 컴포넌트(props)로 데이터를 전달하는 방법을 주로 소개합니다. 또한 Vue 상위 컴포넌트와 하위 컴포넌트 간의 값 전송(props) 구현 코드도 소개합니다.

Vue 페이지 구조

프로젝트 작업을 하다 보면 특정 데이터의 세부정보 등을 조회하기 위해 이 페이지의 데이터(예: ID 번호)를 다른 페이지로 가져와야 하는 상황이 종종 있습니다. 전통적인 접근 방식은 URL에 넣지 않고 현재 H5 "sessionStorage"와 "localStorage"에 매개 변수, 쿠키를 추가하거나 값을 할당하는 방법입니다.

Angularjs, React, Vue 등 인기 있는 컴포넌트 기반 개발 방법으로 또 다른 좋은 솔루션이 되었습니다.

최근 일부 친구들이 Vue 구성요소 간에 매개변수가 어떻게 전달되는지 물었습니다. 실제로 Vue에서는 컴포넌트(props, 컴포넌트 통신, 슬롯) 간에 데이터를 전송하는 세 가지 방법이 있습니다. 이번에 첫 번째 방법은 다음과 같습니다.

a 상위 컴포넌트 콘텐츠:

b 하위 컴포넌트 가져오기 b 양식을 소개합니다. ' b.vue'

components: {&#39;b-p&#39;: b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

로그인 후 복사

B 하위 구성 요소 콘텐츠:

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

로그인 후 복사

a 구성 요소의 데이터 값이 계속 변경되는 한, b 하위 구성 요소의 props는 propsname의 변경 사항을 실시간으로 모니터링하고 응답합니다. 그에 따라 페이지에 렌더링 방법도 {{propsname}}입니다.

PS: vue 상위 컴포넌트와 하위 컴포넌트 간에 값(props)을 전달하는 방법을 소개하겠습니다

먼저 하위 컴포넌트를 정의하고 해당 컴포넌트에 props를 등록합니다

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

로그인 후 복사

부모 컴포넌트에서 다음을 소개합니다. 하위 구성 요소에 필요한 값

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

로그인 후 복사

이 메서드는 상위 구성 요소에서 하위 구성 요소로만 전달할 수 있습니다. 하위 구성 요소는 상위 구성 요소의 데이터를 업데이트할 수 없습니다

위 내용은 제가 한 것입니다. 모든 사람을 위해 편집되었습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.