지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > Vue 구성 요소에 값을 전달하는 방법

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

青灯夜游
풀어 주다： 2023-01-06 17:26:16
원래의
2449명이 탐색했습니다.

값 전달 방법: 1. 소품을 사용하여 부모에서 자식으로 전달합니다. 2. 자식에서 부모로 전달하려면 "this.$emit('이벤트 이름')"을 사용하여 이벤트를 실행해야 합니다. 하위 구성요소를 사용하고 " @EventName" 모니터링을 사용합니다. 3. 형제 사이에서 공개 상위 요소를 브리지로 사용하고 상위 및 하위 소품을 결합하여 매개변수와 하위 및 상위 사용자 지정 이벤트를 전달합니다. 4. 라우팅을 사용하여 값을 전달합니다. 5. $ref를 사용하여 값을 전달합니다. 6. 종속성 주입을 사용하여 다음 세대에 전달합니다. 7. $attrs를 사용합니다. 9. $listeners를 사용하여 전달합니다.

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

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

이 글에서는 Vue 구성 요소에서 값을 전달하는 10가지 방법에 대해 설명합니다. 일반적으로 사용되는 방법은 5~6가지입니다. 요약 그림부터 시작해 보겠습니다.

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

1. 하위 구성 요소에 전달

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

기본값, 즉 props를 정의하려면 :{msg: {type: String, default: 'hello world'}},
기본값이 객체 유형인 경우: props: { msg: { type: Object, default: () => 'dan_seek' } } }}

참고 유일한 점은 이 값 전송이 단방향이므로 상위 구성 요소의 값을 변경할 수 없으며(물론 참조 유형 제외) 값을 직접 수정하는 경우입니다. props, 경고가 보고됩니다.

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

Children.vue

<template>
    <section>
        父组件传过来的消息是：{{myMsg}}
    </section>
</template>

<script>
    export default {
        name: "Children",
        components: {},
        props:[&#39;msg&#39;],
        data() {
            return {
                myMsg:this.msg
            }
        },
        methods: {}
    }
</script>
로그인 후 복사

Parent.vue

<template>
  <div class="parent">
    <Children :msg="message"></Children>
  </div>
</template>

<script>
import Children from &#39;../components/Children&#39;

export default {
  name: &#39;Parent&#39;,
  components: {
      Children
  },
  data() {
      return {
          message:&#39;hello world&#39;
}
},
}
</script>
로그인 후 복사

2 하위 구성요소가 상위 구성요소로 전달됩니다.

여기서 사용자 정의 이벤트를 사용해야 합니다. $emit('myEvent') 하위 구성 요소에서 트리거한 다음 상위 구성 요소에서 @myEvent를 사용하여

Children.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div>
</template>

<script>
    import ChildrenCom from &#39;../components/Children&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            ChildrenCom
        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum
            }
        }
    }
</script>
로그인 후 복사

Parent.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div></template><script>
    import ChildrenCom from &#39;../components/Children&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            ChildrenCom        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum            }
        }
    }</script>
로그인 후 복사

3. 형제 구성 요소 간에 값 전달

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

EventBus.js

import Vue from &#39;vue&#39;
export default new Vue()
로그인 후 복사

Children1.vue

<template>
    <section>
        <div @click="pushMsg">push message</div>
        <br>
    </section>
</template>

<script>
    import eventBus from &#39;./EventBus&#39;
    export default {
        name: "Children1",
        components: {},
        data() {
            return {
                childNum:0
            }
        },
        methods: {
            pushMsg(){
            	// 通过事件总线发送消息
                eventBus.$emit(&#39;pushMsg&#39;,this.childNum++)
            }
        }
    }
</script>
로그인 후 복사

Children2.vue

<template>
    <section>
        children1传过来的消息：{{msg}}
    </section>
</template>

<script>
    import eventBus from &#39;./EventBus&#39;

    export default {
        name: "Children2",
        components: {},
        data() {
            return {
                msg: &#39;&#39;
            }
        },
        mounted() {
        	// 通过事件总线监听消息
            eventBus.$on(&#39;pushMsg&#39;, (children1Msg) => {
                this.msg = children1Msg
            })
        }
    }
</script>
로그인 후 복사

Parent.vue

<template>
    <div class="parent">
        <Children1></Children1>
        <Children2></Children2>
    </div>
</template>

<script>
    import Children1 from &#39;../components/Children1&#39;
    import Children2 from &#39;../components/Children2&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            Children1,
            Children2
        },
        data() {
            return {
            }
        },
        methods:{
        }
    }
</script>
로그인 후 복사

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

4. 경로 간 값 전달

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

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

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

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

ii. 콜론을 사용하여 값을 전달합니다

다음 경로를 구성합니다. 

{
    path: &#39;/b/:name&#39;,
    name: &#39;b&#39;,
    component: () => import( &#39;../views/B.vue&#39;)
  },
로그인 후 복사

페이지 B에서 this.$route.params.name을 사용하여 경로에서 전달된 이름 값을 가져올 수 있습니다

iii.값을 전달하려면 부모-자식 구성 요소를 사용하세요

라우터 뷰로 인해 구성 요소 자체이기도 하므로 부모-자식 구성 요소 값 전송 방법을 사용하여 값을 전달할 수도 있습니다. 해당 하위 페이지에 props를 추가하세요. 유형이 업데이트된 후 경로가 새로 고쳐지지 않으므로 하위 페이지 값의 마운트된 후크에서 직접 최신 유형을 얻을 수 없으므로 대신 watch를 사용하세요. 

<router-view :type="type"></router-view>
로그인 후 복사
// 子页面
......
props: [&#39;type&#39;]
......
watch: {
            type(){
                // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
            },
        },
로그인 후 복사

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

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

먼저 하위 구성 요소 Children .vue

<template>
    <section>
        传过来的消息：{{msg}}
    </section>
</template>

<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                msg: &#39;&#39;,
                desc:&#39;The use of ref&#39;
            }
        },
        methods:{
            // 父组件可以调用这个方法传入msg
            updateMsg(msg){
                this.msg = msg
            }
        },
    }
</script>
로그인 후 복사

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

<template>
    <div class="parent">
        <!-- 给子组件设置一个ID ref="children" -->
        <Children ref="children"></Children>
        <div @click="pushMsg">push message</div>
    </div>
</template>

<script>
    import Children from &#39;../components/Children&#39;

    export default {
        name: &#39;parent&#39;,
        components: {
            Children,
        },
        methods:{
            pushMsg(){
                // 通过这个ID可以访问子组件的方法
                this.$refs.children.updateMsg(&#39;Have you received the clothes？&#39;)
                // 也可以访问子组件的属性
                console.log(&#39;children props:&#39;,this.$refs.children.desc)
            }
        },
    }
</script>
로그인 후 복사

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

상위 구성 요소에는 getName() 메서드가 있으므로 모든 하위 구성 요소에 이를 제공해야 합니다. 

provide: function () {
  return {
    getName: this.getName()
  }
}
로그인 후 복사

제공 옵션을 사용하면 하위 구성 요소에 제공하려는 데이터/메서드를 지정할 수 있습니다.

그런 다음 하위 구성 요소에서 inject를 사용할 수 있습니다. 현재 인스턴스에 상위 구성 요소를 삽입하려면 데이터/방법: 

inject: [&#39;getName&#39;]
로그인 후 복사

Parent.vue

<template>
    <div class="parent">
        <Children></Children>
    </div>
</template>

<script>
    import Children from &#39;../components/Children&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            Children,
        },
        data() {
            return {
                name:&#39;dan_seek&#39;
            }
        },
        provide: function () {
            return {
                getName: this.name
            }
        },
    }
</script>
로그인 후 복사

Children.vue



<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
            }
        },
        inject: [&amp;#39;getName&amp;#39;],
    }
</script>
로그인 후 복사

7, ancestral grandson $attrs

일반적으로 아버지의 소품을 다음과 같이 사용해야 합니다. 중간 전환이지만 이렇게 하면 상위 구성 요소의 비즈니스와 관련이 없는 속성이 더 많이 있으며 $attrs를 사용하면 결합 정도가 높아집니다. 조상도 손자도 수정해야 합니다

GrandParent.vue

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>
로그인 후 복사

Parent.vue

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from &#39;./Children&#39;

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>
로그인 후 복사

Children.vue

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>
로그인 후 복사
결과 표시
父组件收到
祖父的名字：grandParent
子组件收到
祖父的名字：
祖父的性别：男
祖父的年龄：88
祖父的爱好：code
로그인 후 복사

8. $의 도움 Sun은 중간 이벤트를 청취자에게 편리하게 알릴 수 있습니다. 코드 예제는 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(&#39;key&#39;, &#39;value&#39;);

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem(&#39;key&#39;);

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(&#39;key&#39;);

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
로그인 후 복사

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。

这样存对象是不是很麻烦呢，推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

// localStorage
 storage.set(key,val) 
 storage.get(key, def)
 
 // sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)
로그인 후 복사

更多请移步：https://github.com/ustbhuangyi/storage#readme

【相关推荐：vuejs视频教程、web前端开发】

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

관련 라벨：
vue vue 구성 요소 전달 값
원천：php.cn
이전 기사：객체.할당()을 사용하는 방법 다음 기사：반응으로 점프 값 전송을 구현하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿