지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > View.js > 구성 요소 간 통신 방법은 무엇입니까? Vue 컴포넌트 통신 방법 목록(수집할 가치가 있음)

구성 요소 간 통신 방법은 무엇입니까? Vue 컴포넌트 통신 방법 목록(수집할 가치가 있음)

青灯夜游
풀어 주다： 2022-08-19 20:04:02
앞으로
1448명이 탐색했습니다.

Vue구성요소 간 통신 방법은 무엇인가요? 이 기사는 Vue2 및 Vue3의 10가지 구성 요소 통신 방법을 살펴봅니다. 모든 사람에게 도움이 되기를 바랍니다.

구성 요소 간 통신 방법은 무엇입니까? Vue 컴포넌트 통신 방법 목록(수집할 가치가 있음)

Vue에는 컴포넌트 통신 방법이 많이 있으며, Vue2와 Vue3의 구현에는 많은 차이점이 있습니다. 이 글에서는 选项式API 组合式API以及setup세 가지 구현 방법을 통해 Vue2와 Vue3의 컴포넌트 통신 방법을 종합적으로 소개합니다. 구현될 통신 방식은 아래 표와 같습니다. (학습 영상 공유: vue 영상 튜토리얼)

제공 injectNone없음expose&refmitt
method Vue2 Vue3
아버지가 아들에게 props props
아들에서 아버지로 $emit ㅋㅋㅋ 아들 제공
아들에서 상위로 inject
하위 구성 요소가 상위 구성 요소에 액세스 $parent
상위 구성 요소가 하위 구성 요소에 액세스 $children
부모님 컴포넌트 하위 컴포넌트에 액세스 $ref
Brotherly 전달된 값 EventBus

props

props는 컴포넌트 통신에서 가장 일반적으로 사용되는 통신 방법 중 하나입니다. 상위 구성 요소는 v-bind를 통해 전달되고 하위 구성 요소는 props를 통해 수신됩니다. 다음은 세 가지 구현 방법입니다

  • Optional API
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data() {
    return {
      parentMsg: '父组件信息'
    }
  }
}
</script>


//子组件

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {
  props:['msg']
}
</script>
로그인 후 복사
  • Combined API
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import { ref,defineComponent } from 'vue'
import Child from './Child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const parentMsg = ref('父组件信息')
    return {
      parentMsg
    };
  },
});
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script>
import { defineComponent,toRef } from "vue";
export default defineComponent({
    props: ["msg"],// 如果这行不写，下面就接收不到
    setup(props) {
        console.log(props.msg) //父组件信息
        let parentMsg = toRef(props, 'msg')
        return {
            parentMsg
        };
    },
});
</script>
로그인 후 복사
  • 설정 구문 설탕
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const parentMsg = ref('父组件信息')
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script setup>
import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
</script>
로그인 후 복사

참고

props의 데이터 흐름은 단일 항목입니다. 즉, 하위 구성 요소는 상위 구성 요소가 전달한 값을 변경할 수 없습니다.

결합된 API에서 하위 구성 요소의 다른 변수를 사용하여 수신하려는 경우 props의 값을 변경하려면 toRef를 사용해야 합니다. 속성을 반응형으로 변환하세요.

emit

하위 구성 요소는 이벤트를 게시하고 내보내기를 통해 일부 매개변수를 전달할 수 있으며, 상위 구성 요소는 v-on

  • Optional API
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  methods: {
    getFromChild(val) {
      console.log(val) //我是子组件数据
    }
  }
}
</script>

// 子组件

<template>
  <div>
    <button @click="sendFun">send</button>
  </div>
</template>
<script>
export default {
  methods:{
    sendFun(){
      this.$emit('sendMsg','我是子组件数据')
    }
  }
}
</script>
로그인 후 복사
  • Combined API
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
    return {
      getFromChild
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        const sendFun = () => {
            ctx.emit('sendMsg', '我是子组件数据')
        }
        return {
            sendFun
        };
    },
});
</script>
로그인 후 복사
  • 설정을 통해 이 이벤트를 모니터링합니다. 구문 설탕
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script setup>
import Child from './Child'
const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>
<script setup>
import { defineEmits } from "vue";
const emits = defineEmits(['sendMsg'])
const sendFun = () => {
    emits('sendMsg', '我是子组件数据')
}
</script>
로그인 후 복사

attrs 및 리스너

하위 구성 요소는 $attrs를 사용하여 props에 의해 전달된 속성과 속성 바인딩 속성(클래스 및 스타일)을 제외한 상위 구성 요소의 모든 속성을 가져옵니다.

하위 구성 요소는 $listeners를 사용하여 Vue3에서 더 이상 사용되지 않는 상위 구성 요소(.native 수정자 제외)의 모든 v-on 이벤트 리스너를 가져오지만 Vue3의 attrs는 상위 구성 요소가 전달한 속성만 얻을 수 있는 것은 아닙니다. 구성요소 상위 구성요소 v-on 이벤트 리스너를 가져올 수도 있습니다

  • Optional API
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data(){
    return {
      msg1:'子组件msg1',
      msg2:'子组件msg2'
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
  }
}
</script>

//子组件

<template>
  <div>
    <button @click="getParentFun">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods:{
    getParentFun(){
      this.$listeners.parentFun('我是子组件数据')
    }
  },
  created(){
    //获取父组件中所有绑定属性
    console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    //获取父组件中所有绑定方法    
    console.log(this.$listeners) //{parentFun:f}
  }
}
</script>
로그인 후 복사
  • Combined API
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent,ref } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    const parentFun = (val) => {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
    return {
      parentFun,
      msg1,
      msg2
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        //获取父组件方法和事件
        console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
        const getParentFun = () => {
            //调用父组件方法
            ctx.attrs.onParentFun('我是子组件数据')
        }
        return {
            getParentFun
        };
    },
});
</script>
로그인 후 복사
  • setup 구문 sugar
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
  console.log(`父组件方法被调用,获得子组件传值：${val}`)
}
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script setup>
import { useAttrs } from "vue";

const attrs = useAttrs()
//获取父组件方法和事件
console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
    //调用父组件方法
    attrs.onParentFun('我是子组件数据')
}
</script>
로그인 후 복사

Note

attrs를 사용하여 상위 구성요소 메소드 호출 Vue3에서 메소드 앞에 추가해야 하는 경우, 예를 들어 parentFun->onParentFun

provide/inject

provide:는 객체이거나 객체를 반환하는 함수입니다. 여기에는 미래 세대에게 물려줄 속성이 담겨 있습니다

inject: 문자열 배열 또는 객체. inject

  • Optional API
//父组件
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg1: '子组件msg1',
      msg2: '子组件msg2'
    }
  },
  provide() {
    return {
      msg1: this.msg1,
      msg2: this.msg2
    }
  }
}
</script>

//子组件

<script>
export default {
  inject:['msg1','msg2'],
  created(){
    //获取高层级提供的属性
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }
}
</script>
로그인 후 복사
  • Combined API
//父组件

<script>
import Child from './Child'
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    provide("msg1", msg1)
    provide("msg2", msg2)
    return {
      
    }
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { inject, defineComponent } from "vue";
export default defineComponent({
    setup() {
        console.log(inject('msg1').value) //子组件msg1
        console.log(inject('msg2').value) //子组件msg2
    },
});
</script>
로그인 후 복사
  • setup Syntax sugar
//父组件
<script setup>
import Child from './Child'
import { ref,provide } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1",msg1)
provide("msg2",msg2)
</script>

//子组件

<script setup>
import { inject } from "vue";
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
</script>
로그인 후 복사

를 통해 상위 구성 요소 또는 상위 구성 요소에서 제공하는 값을 가져옵니다. :

provide/inject는 일반적으로 깊은 구성 요소 중첩에 사용하기에 적합합니다. 일반적으로 컴포넌트 개발에 사용됩니다.

parent/children

$parent: 자식 컴포넌트는 부모 컴포넌트의 Vue 인스턴스를 획득하고, 부모 컴포넌트의 속성 메서드 등을 획득할 수 있습니다.

$children: 부모 컴포넌트는 부모 컴포넌트의 Vue 인스턴스를 획득합니다. 직계 자식의 배열 및 모음인 자식 구성 요소. 그러나 자식 구성 요소의 순서는 보장되지 않습니다.

  • Vue2
import Child from './Child'
export default {
  components: {
    Child
  },
  created(){
    console.log(this.$children) //[Child实例]
    console.log(this.$parent)//父组件实例
  }
}
로그인 후 복사

Note부모가 얻은 $children 구성 요소가 응답하지 않습니다$children并不是响应式的

expose&ref

$refs可以直接获取元素属性，同时也可以直接获取子组件实例

  • 选项式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  mounted(){
    //获取子组件属性
    console.log(this.$refs.child.msg) //子组件元素

    //调用子组件方法
    this.$refs.child.childFun('父组件信息')
  }
}
</script>

//子组件 

<template>
  <div>
    <div></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    childFun(val){
      console.log(`子组件方法被调用,值${val}`)
    }
  }
}
</script>
로그인 후 복사
  • 组合式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
  components: {
    Child
  },

  setup() {
    const child = ref() //注意命名需要和template中ref对应
    onMounted(() => {
      //获取子组件属性
      console.log(child.value.msg) //子组件元素

      //调用子组件方法
      child.value.childFun('父组件信息')
    })
    return {
      child //必须return出去 否则获取不到实例
    }
  },
});
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const msg = ref('子组件元素')
        const childFun = (val) => {
            console.log(`子组件方法被调用,值${val}`)
        }
        return {
            msg,
            childFun
        }
    },
});
</script>
로그인 후 복사
  • setup语法糖
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref, onMounted } from "vue";
const child = ref() //注意命名需要和template中ref对应
onMounted(() => {
  //获取子组件属性
  console.log(child.value.msg) //子组件元素

  //调用子组件方法
  child.value.childFun('父组件信息')
})
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
const msg = ref('子组件元素')
const childFun = (val) => {
    console.log(`子组件方法被调用,值${val}`)
}
//必须暴露出去父组件才会获取到
defineExpose({
    childFun,
    msg
})
</script>
로그인 후 복사

注意

通过ref获取子组件实例必须在页面挂载完成后才能获取。

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

  • 选项式API
//组件1
<template>
  <div>
    <button @click="sendMsg">传值</button>
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    sendMsg(){
      Bus.$emit('sendMsg','兄弟的值')
    }
  }
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  created(){
   Bus.$on('sendMsg',(val)=>{
    console.log(val);//兄弟的值
   })
  }
}
</script>

//bus.js

import Vue from "vue"
export default new Vue()
로그인 후 복사
  • 组合式API

首先安装mitt

npm i mitt -S
로그인 후 복사

然后像Vue2中bus.js一样新建mitt.js

expose&ref

    $refs는 요소 속성을 직접 얻을 수 있으며 하위 구성 요소 인스턴스도 직접 얻을 수 있습니다
옵션 API

import mitt from 'mitt'
const Mitt = mitt()
export default Mitt
로그인 후 복사

Combined API

//组件1
<template>
     <button @click="sendMsg">传值</button>
</template>
<script>
import { defineComponent } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
    setup() {
        const sendMsg = () => {
            Mitt.emit('sendMsg','兄弟的值')
        }
        return {
           sendMsg
        }
    },
});
</script>

//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script>
import { defineComponent, onUnmounted } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
  setup() {
    const getMsg = (val) => {
      console.log(val);//兄弟的值
    }
    Mitt.on('sendMsg', getMsg)
    onUnmounted(() => {
      //组件销毁 移除监听
      Mitt.off('sendMsg', getMsg)
    })

  },
});
</script>
로그인 후 복사

setup 구문 sugar

//组件1

<template>
    <button @click="sendMsg">传值</button>
</template>
<script setup>
import Mitt from './mitt.js'
const sendMsg = () => {
    Mitt.emit('sendMsg', '兄弟的值')
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import Mitt from './mitt.js'
const getMsg = (val) => {
  console.log(val);//兄弟的值
}
Mitt.on('sendMsg', getMsg)
onUnmounted(() => {
  //组件销毁 移除监听
  Mitt.off('sendMsg', getMsg)
})
</script>
로그인 후 복사
참고로

🎜ref를 통해 하위 구성 요소 인스턴스를 얻으려면 페이지가 마운트된 후에 얻어야 합니다. 🎜🎜설정 구문 설탕을 사용할 때 하위 구성 요소는 이를 얻기 위해 요소 또는 메소드를 상위 구성 요소에 노출해야 합니다.🎜

🎜EventBus/mitt🎜🎜🎜자매 구성 요소는 다음을 통해 통신할 수 있습니다. 이벤트 센터 EventBus 구현은 이벤트를 모니터링, 트리거 및 삭제하기 위한 새로운 Vue 인스턴스를 생성합니다. 🎜🎜Vue3에는 EventBus 형제 구성 요소 통신이 없지만 이제 대체 솔루션 mitt.js가 있습니다. 원칙은 여전히 ​​EventBus🎜🎜🎜Optional API🎜🎜rrreee🎜🎜Combined API🎜🎜 🎜입니다. 먼저 mitt🎜rrreee🎜를 설치한 다음 Vue2🎜🎜mitt.js🎜rrreeerrreee🎜🎜setup 구문 sugar🎜🎜rrreee🎜에서 bus.js와 같은 새 mitt.js 파일을 만듭니다. 🎜마지막에 작성🎜🎜🎜사실 컴포넌트는 Vuex 또는 Pinia 상태 관리 도구와도 통신할 수 있습니다(그러나 이는 컴포넌트를 재사용할 수 없는 문제가 발생하므로 일반적으로 컴포넌트 간의 통신에는 권장되지 않습니다). Vuex와 Pinia의 사용법은 이 글을 참고하세요🎜Pinia와 Vuex를 분석한 글🎜🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 구성 요소 간 통신 방법은 무엇입니까? Vue 컴포넌트 통신 방법 목록(수집할 가치가 있음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue vue3 컴포넌트 통신
원천：juejin.cn
이전 기사：vite+vue3.0+ts에서 axios를 캡슐화하는 방법에 대해 이야기해 볼까요? 다음 기사：vue3의 Reactive와 ref의 차이점에 대한 자세한 설명(소스코드 분석)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
Laravel 8 - /{editable_text} 경로를 /{user} 경로로 리디렉션하는 방법 사용자 프로필로 연결되는 리디렉션 경로를 만들려고 했습니다. 리디렉션 경로는 사용자 데이터베이스의 문자열/텍스트여야 하며 동일한 사용자 프로필 페이지로 리디렉션되...
에서 2024-04-06 17:26:11
0
1
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿