이번에는 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>
이 두 부분의 코드는 매우 명확합니다. 상위 구성 요소는 가져오기를 통해 하위 구성 요소를 가져오고 이를 구성 요소 속성에 등록합니다. 그러면 하위 구성 요소는
효과 예 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中文网其它相关文章!
推荐阅读:
怎样使用nodejs express配置自签名https服务器
위 내용은 Vue 상위 구성 요소와 하위 구성 요소 간의 통신을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!