Vue 구성 요소에 값을 전달하는 방법

Vue 구성 요소는 다음과 같은 방법으로 값을 전달합니다. 1. 아버지에서 아들로 전달 3. 형제에서 값 전달 4. 물음표, 콜론 및 부모-자식 구성 요소로 값 전달 . "$ref"를 사용하여 값을 전달합니다. 6. "inject"를 사용하여 상위 구성 요소의 데이터를 현재 인스턴스에 삽입합니다. 7. 조상에서 손자에게 전달합니다. 9. $parent; 10. sessionStorage에 값을 전달합니다. 11. vuex.

1. 상위 구성 요소를 하위 구성 요소에 전달합니다.

하위 구성 요소에 props를 정의합니다. 즉, props:['msg'], msg는 객체 또는 기본 데이터 유형일 수 있습니다

기본값, 즉 props: {msg: {type: String, default: 'hello world'}},

기본값이 객체인 경우 유형: props: { msg: { type: Object , 기본값: () => { return { name: 'dan_seek' } } }}

이 값 전송은 단방향이므로 상위 구성 요소의 값을 변경할 수 없습니다(참조 유형 제외). 물론), props 값을 직접 수정하면 경고가 표시됩니다.

권장되는 작성 방법은 data()(Children.vue 참조)에서 변수를 재정의하고 여기에 props를 할당하는 것입니다. 물론 계산된 속성도 허용됩니다.

Children.vue

Parent.vue

2. 하위 구성요소를 상위 구성요소에 전달합니다.

여기에서 사용자 정의 이벤트를 사용해야 합니다. 하위 구성요소, 상위 구성요소에서 구성요소

Children.vue

Parent.vue

3에서 @myEvent 모니터링을 사용합니다. 형제 구성요소 간에 값을 전달합니다.

사용자 정의 이벤트의 트리거링 및 모니터링 기능을 사용합니다. 중간 브리지로서 모든 구성 요소에 값을 전달할 수 있는 공개 이벤트 버스인 eventBus를 정의하기 위해 방출합니다. 그리고 eventBus를 사용하면 Emit에 대한 이해가 깊어질 수 있습니다.

EventBus.js

import Vue from 'vue'export default new Vue() Children1.vue 

Children2.vue

Parent.vue

github에는 오픈 소스 vue-bus 라이브러리도 있습니다. 참고하실 수 있습니다: https://github.com/yangmingshan/vue -bus#readme

4. 경로 간 값 전달

i. 물음표를 사용하여 값 전달

페이지 A가 페이지 B로 이동할 때 this.$router.push('/B?name=danseek')를 사용하세요. )

B 페이지에서는 $route.query.name을 사용하여 페이지 A에서 전달된 값을 가져올 수 있습니다.

위의 라우터와 경로의 차이점에 유의하세요

ii. 값을 전달하려면 콜론을 사용하세요

다음 경로를 구성하세요.

{ path: '/b/:name', name: 'b', component: () => import( '../views/B.vue') },

페이지 B에서 this.$route .params.name을 전달하여 경로에 의해 전달된 이름의 값을 얻을 수 있습니다

iii 값을 전달하려면 상위-하위 구성 요소를 사용하세요.

라우터가- 뷰 자체도 구성 요소이므로 상위-하위 구성 요소를 사용하여 값을 전달할 수도 있으며 해당 하위 페이지에 소품 추가는 유형이 업데이트된 후 경로가 새로 고쳐지지 않기 때문에 최신 항목을 직접 얻을 수 없습니다. 대신, watch를 사용해야 합니다.

 // 子页面 ...... props: ['type'] ...... watch: { type(){ // console.log("在这个方法可以时刻获取最新的数据:type=",this.type) }, },

5. $ref를 사용하여 값 전달

$ref 기능을 사용하여 하위 구성 요소의 ID를 정의하세요. 상위 구성 요소는 이 ID를 통해 하위 구성 요소의 메서드와 속성에 직접 액세스할 수 있습니다.

먼저 정의하세요. 하위 구성 요소 Children.vue

그런 다음 상위 구성 요소 Parent.vue에서 Children.vue를 참조하고 ref 속성을 정의합니다

6. 종속성 주입을 사용하여 이를 자손과 증손자에게 전달합니다.

부모 구성 요소에 모든 자손에게 제공되어야 하는 메소드 getName()

provide: function () { return { getName: this.getName() } }

제공 옵션을 사용하면 자손 컴포넌트에 제공하려는 데이터/메서드를 지정할 수 있습니다.

그런 다음 모든 자손 컴포넌트에서 주입을 사용하여 상위 구성 요소의 데이터/메서드를 현재 인스턴스에 추가:

inject: ['getName']

Parent.vue

Children.vue

7. 조상 손자 $attrs

일반적으로 중간 전환으로 아버지의 props를 사용해야 하지만, 이런 식으로 아버지 구성 요소는 상위 구성 요소 비즈니스와 관련이 없는 더 많은 것을 갖게 됩니다. 속성, 높은 결합도는 $attrs의 도움으로 단순화될 수 있으며 조상이나 손자 모두 수정할 필요가 없습니다

GrandParent. vue

Parent.vue

Children.vue

표시 결과

부모 구성 요소 수신됨

할아버지 이름: grandParent

하위 구성 요소 수신됨

할아버지 이름:

할아버지 성별 : 남자

할아버지 나이: 88세

할아버지의 취미: code

8, 손자의 조상

$listeners 중간 이벤트의 도움으로 손자가 조상에게 편리하게 알릴 수 있는 코드 예시는 7

9, $parent

부모님을 얻을 수 있습니다. 상위 구성 요소 인스턴스를 통해 상위 구성 요소의 속성과 메서드에 액세스할 수 있으며, 루트 구성 요소 인스턴스도 얻을 수 있습니다.

구문:

// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()

따라서 하위 구성 요소를 상위 구성 요소에 전달하는 예에서는 this.$parent.getNum(100)을 사용하여 상위 구성 요소에 값을 전달할 수 있습니다.

10. SessionStorage 값 전송

sessionStorage는 브라우저의 전역 개체이며, 페이지가 닫히면 여기에 저장된 데이터가 삭제됩니다. 이 기능을 사용하면 모든 페이지에서 데이터 사본을 공유할 수 있습니다.

구문:

// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();

참고: 문자열 유형만 가능한 키-값 쌍을 저장하려면 객체를 저장하려면 let objStr = JSON.stringify(obj)를 사용하여 이를 문자열로 변환해야 합니다. 저장합니다(obj = JSON.parse(objStr)를 객체로 구문 분석할 때 사용).

이렇게 객체를 저장하는 것이 번거롭나요? sessionStorage를 캡슐화한 라이브러리 good-storage를 추천하고, 해당 API를 사용하여 객체를 직접 저장할 수 있습니다

// localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)

11, vuex

이 유명한 vuex의 사용 방법을 여기서는 소개하지 않겠습니다. 명확하게 작성하려면 너무 길어질 것이기 때문입니다...

대규모 단일 페이지 애플리케이션을 개발할 계획이 없다면 Vuex를 사용하는 것이 어려울 수 있습니다. 번거롭고 중복됩니다. 사실입니다. 앱이 충분히 단순하다면 Vuex를 사용할 필요가 없을 수도 있습니다.

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