Vue 구성 요소에 값을 전달하는 방법-프런트엔드 Q&A-php.cn

값 전달 방법: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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

1. 하위 구성 요소에 전달

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

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

4. 경로 간 값 전달

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

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

7, ancestral grandson $attrs

결과 표시

8. $의 도움 Sun은 중간 이벤트를 청취자에게 편리하게 알릴 수 있습니다. 코드 예제는 7

10、sessionStorage传值