vue 구성 요소 간 매개 변수 전달

1. 아버지에서 아들에게 매개 변수 전달

부모 구성 요소 parent.vue :

하위 구성 요소를 도입하고 v-bind를 통해 매개 변수를 전달합니다.

<template>
    <div class="myVue">
        <children :data="msg"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
      msg: '父传子'
    }
  },
  components: {
    children
  }
}
</script>

자식 구성 요소 children.vue

전달 된 매개 변수를 소품을 통해 소개

<template>
 <div>{
   
   {data}}</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['data']
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
</style>

Prop은 매개 변수도 확인할 수 있습니다.

 props: {
      data: {
          type: String,   // 传入类型
          required: true, // 是否必须
          default: ''     // 默认值
      } 
  }

둘째, 아들은 아버지에게

하위 구성 요소 : children.vue

v-on으로 바인딩 된 함수는 this. $ emit를 사용하여 함수에서 매개 변수를 전달합니다.

<template>
 <div @click="func">点击向父组件传参</div>
</template>

<script>
export default {
  data () {
    return {
      msg: '子向父'
    }
  },
  methods: {
    func () {
      this.$emit('funcParent', this.msg)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

부모 구성 요소 : parent.vue

v-on을 통해 전달 된 함수를 수락하고 사용자 지정 함수의 매개 변수를 수락합니다.

<template>
    <div class="myVue">
        <children @funcParent="func"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
    }
  },
  components: {
    children
  },
  methods: {
    func (data) {
      console.log(data)
    }
  }
}
</script>

보충 지식 :

$ emit는 vue 인스턴스에 마운트 된 이벤트 메소드이며 다음과 같이 사용됩니다.

vm. $ emit (eventName, [… args])

매개 변수 : eventName은 트리거 된 이벤트의 이름 (문자열), [... args]는 여러 매개 변수입니다.

기능 : 현재 인스턴스에서 eventName 이벤트를 트리거하고 리스너 콜백에 매개 변수를 전달합니다.

셋, 형제 구성 요소 간의 매개 변수 전달

방법 1 : 상위 구성 요소 전송

이 방법은 이해하기 쉽지만 좀 더 번거 롭습니다 .v-on과 $ emit ()를 통해 자식 컴포넌트의 매개 변수를 부모 컴포넌트에 전달한 다음 v-bind를 통해 부모 컴포넌트를 다른 자식 컴포넌트에 전달하는 것입니다. 예, 여기에서는 일부 코드가 생략되었습니다.

방법 2 : 이벤트 카의 도움으로 데이터가 이벤트 카를 통해 전송됩니다.

원하는 위치에 js 파일을 생성합니다. 모든 형제가 동일한 이벤트 메커니즘을 공유하도록 Vue의 인스턴스를 생성하기 위해 bus.js라는 이름을 지정했습니다. 내용은 다음과 같습니다.

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

매개 변수를 전달하는 형제 구성 요소 children.vue에서 :

매개 변수를 버스를 통해 funcBrother 함수에 전달합니다.

<template>
  <div>
      <button @click="func">点击按钮向兄弟组件children传值</button>
  </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      x: 1
    }
  },
  methods: {
    func () {
      Bus.$emit('funcBrother', this.x++)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

 허용되는 형제 구성 요소 brother.vue에서 :

 Bus. $ on를 통해 전달 된 값을받습니다.

<template>
 <div>
    第{
   
   {msg}}次
 </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      msg: 0
    }
  },
  created () {
    Bus.$on('funcBrother', (val) => {
      this.msg = val
    })
  }
}
</script>

방법 3 : 필요한 매개 변수를 localStroage 또는 sessionStroage에 직접 입력

이것이 입출금 작업이며, 동시에 둘의 차이에 주목하면 LocalStorage와 sessionStorage 의 차이를 볼 수 있습니다 . 그러나 이런 방식으로 저장할 때 몇 가지 문제에주의를 기울여야합니다.

• 저장 공간이 제한되어 있으며 영구적으로 보관할 필요가없는 것은 사용 후 시간 내에 정리됩니다.
• 전 세계적으로 사용되기 때문에 반복되는 키 오염 등의 문제를 방지하기 위해 네임 스페이스를 합리적으로 사용하고 최종적으로 사전에 동의하거나 README에 작성해야합니다.
• 여러 구성 요소에 작업을 저장하고 꺼내야 할 수 있으므로 결합도가 높고 수정시 매우 번거롭고 최종적으로 함수 처리로 캡슐화됩니다.