집 > 기사 > 웹 프론트엔드 > Vue 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법

Vue 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법

php中世界最好的语言원래의: 2018-05-28 11:27:101721검색

이번에는 Vue 부모와 자식 컴포넌트 간의 통신을 구현하는 방법과 Vue 부모와 자식 컴포넌트 간의 통신을 구현하기 위한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

구성 요소는 vue.js의 가장 강력한 기능 중 하나이며 구성 요소 인스턴스의 범위는 서로 독립적입니다. 즉, 서로 다른 구성 요소 간의 데이터가 서로 참조할 수 없습니다. 그러면 컴포넌트 간 통신 방법이 Vue의 핵심 지식이 되었습니다. 이 기사에서는 $ref 및 $emit props의 지식 포인트를 통해 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법을 설명합니다.

통신 구현 방법에 대해 이야기하기 전에 먼저 예제의 기반으로 father.vue와 child.vue 두 가지 구성 요소를 구축해 보겠습니다.

//父组件
<template>
 <p>
  <h1>我是父组件！</h1>
  <child></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

//子组件
<template>
 <h3>我是子组件！</h3>
</template>
<script>
</script>

이 두 부분의 코드는 매우 명확합니다. 상위 구성 요소는 가져오기를 통해 하위 구성 요소를 가져오고 이를 구성 요소 속성에 등록합니다. 그러면 하위 구성 요소는 태그를 사용하여 상위 구성 요소에 포함될 수 있습니다. father.vue 실행 후 효과는 다음과 같습니다.

효과 예 1

1 통신은 props

를 통해 이루어집니다. 하위 구성 요소의 props 옵션은 상위 구성 요소로부터 데이터를 받을 수 있습니다. 맞습니다. Prop은 단방향으로만 바인딩됩니다. 즉, 상위 구성 요소에서 하위 구성 요소로만 전달할 수 있으며 반대 방향으로는 전달할 수 없습니다. 전달 방식도 두 가지로 나뉜다.

(1) 정적 전달

하위 컴포넌트는 props 옵션을 통해 커스텀 속성을 선언하고, 상위 컴포넌트는 이 속성을 하위 컴포넌트에 전달한다. .

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']  //声明一个自定义的属性
 }
</script>

(2) 동적 전송

우리는 위와 같이 props에 정적 값을 전달할 수 있다는 것을 이미 알고 있지만, 더 많은 경우 동적 데이터가 필요합니다. 이는 v-bind를 사용하여 달성할 수 있습니다. v-bind를 통해 props의 사용자 정의 속성을 바인딩하면 전달되는 내용은 정적 string이 아니며 표현식, 부울 값, 객체 등 모든 유형의 값이 될 수 있습니다.

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child>
  <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
  <child v-bind:message="a+b"></child>
  <!-- 用一个变量进行动态赋值。-->
  <child v-bind:message="msg"></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
 data() {
  return {
   a:'我是子组件二！',
   b:112233,
   msg: '我是子组件三！'+ Math.random()
  }
 }
}
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']
 }
</script>

효과는 다음과 같습니다:

예제 효과 2

2 통신은 $ref

을 통해 이루어집니다. ref에 대한 공식적인 설명은 다음과 같습니다. ref는 요소 또는 하위 구성 요소를 등록하는 데 사용됩니다. 정보. 참조 정보는 상위 컴포넌트의 $refs 객체에 등록됩니다.

이해가 안 되시죠? 정상입니다. 저도 이해할 수 없습니다. 그건 어떻게 이해해야 할까요? 내 설명을 살펴보세요.

ref가 하위 구성 요소에 사용되면 하위 구성 요소에 대한 인덱스로 이해될 수 있는 구성 요소 인스턴스를 가리킵니다. 속성과 메소드는 하위 구성 요소에 정의되어 있습니다.
일반 DOM 요소에 ref를 사용하면 참조는 DOM 요소를 가리킨다. $ref를 통해 DOM의 속성 컬렉션을 얻을 수 있고, JQ와 유사한 DOM 요소에 쉽게 접근할 수 있다. 선택자.

$ref를 통해 어떻게 소통할 수 있나요? 다음으로 $ref를 사용하여 위 prop에 의해 구현된 함수를 구현하겠습니다.

<!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child ref="msg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  mounted: function () {
   console.log( this.$refs.msg);
   this.$refs.msg.getMessage('我是子组件一！')
  }
 }
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  data(){
   return{
    message:''
   }
  },
  methods:{
   getMessage(m){
    this.message=m;
   }
  }
 }
</script>

위 코드에서 ref='msg'를 통해 하위 구성 요소 하위 인스턴스가 $ref를 가리킬 수 있음을 알 수 있으며, .msg.getMessage () 하위 구성요소의 getMessage 메소드를 호출하고 매개변수를 하위 구성요소에 전달합니다. 다음은 "console.log(this.$refs.msg);"에 의해 인쇄된 내용으로, ref를 통해 얻는 내용을 모든 사람이 더 잘 이해할 수 있도록 해줍니다.

console.log

최종 효과는 다음과 같습니다. 다음과 같습니다:

효과 3 예시

여기에 추가해야 할 한 가지 사항은 prop과 $ref의 차이점입니다.

prop는 데이터 전송에 중점을 두고 하위 구성 요소의 속성과 메서드를 호출할 수 없습니다. . 기사 컴포넌트를 생성할 때 제목과 내용을 사용자 정의하는 등의 사용 시나리오에는 prop을 사용하는 것이 가장 적합합니다.
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧，我按我自己的理解是这样的:

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<template>
 <p>
  <h1>{{title}}</h1>
  <child @getMessage="showMsg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  data(){
   return{
    title:''
   }
  },
  methods:{
   showMsg(title){
    this.title=title;
   }
 }
 }
</script>

<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
  mounted: function () {
   this.$emit('getMessage', '我是父组件！')
  }
 }
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Vue 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법

관련 기사