Vue에서 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 아버지에서 아들로, 아들에서 아버지로 계승되는 방법에 대해 이야기해 봅시다.

Vue에서 상위 구성요소와 하위 구성요소 간에 어떻게 통신하나요? 다음 기사에서는 Vue 부모와 자식 구성 요소 간의 통신을 이해하고 부모가 자식에게 값을 전달하고 자식이 부모에게 값을 전달하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

Vue 상위-하위 구성요소

상위-하위 구성요소란 무엇인가요?

컴포넌트에 또 다른 컴포넌트를 도입하는데, 도입된 컴포넌트를 서브컴포넌트라고 합니다. Vue의 모듈화로 인해 공통된 부분은 별도의 모듈로 추출되며, 모든 페이지 내용은 하나의 Vue 아래에 작성되지 않습니다. 파일. , 모듈화로 인해 두 모듈 간의 통신 문제는 피할 수 없습니다. 이때 모듈(구성 요소) 간의 데이터 전송 문제가 있습니다. [관련 추천: "vue.js Tutorial"]

Vue 부모-자식 컴포넌트 통신

vue에서는 한 컴포넌트가 다른 컴포넌트의 데이터나 메소드를 사용하는 경우가 많습니다. 이때 부모-자식 간 통신이 있습니다. 통신 문제

Vue가 아버지에서 아들에게 전달됨

1. 먼저 코드를 살펴보세요. 설명은 다음과 같습니다.

 //父组件 
  
 //子组件    

설명:
1. 먼저 기본 템플릿 분리 구성 요소를 작성합니다.

2. 객체 모드를 사용하면 소품에 전달해야 하는 매개변수를 작성할 수 있습니다. 매개변수도 객체 모드에 있으며 코드는 비교적 명확합니다.

//子组件 Vue.component("cpn3", { template: "#cpn3", // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里 props: { ctitle: { //参数也使用对象形式，type传类型 default函数，是在找不到参数时返回一个值显示 type: String, default () { return {} } } } })

2 그런 다음 필수 속성을 상위 구성요소에 추가하세요.

//父组件 const app = new Vue({ el: "#app", data: { //这里的title就是要传入子组件的属性 在父组件中定义 title: 'orange' }, methods: {}, })

 //可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了  

//子组件 

Vue에서 사용해야 합니다. 즉, 하위 구성 요소의 내용이 상위 구성 요소인 에 전달되므로 상위 구성 요소는 언제든지 하위 구성 요소의 데이터를 사용할 수 있습니다. 사용 방법은 다음과 같습니다. 사용자 정의 함수

2. 위 사진을 예로 들어, 부품의 자녀 대 아버지 전달에 대해 이야기해 보겠습니다.

2.1 먼저 하위 컴포넌트와 상위 컴포넌트를 분리해서 하나씩 이야기해보겠습니다. 먼저 하위 컴포넌트 코드를 살펴보겠습니다

설명: 하위 컴포넌트는 컴포넌트(html)를 작성해서 패키징하는 것입니다. 언제든지 사용할 수 있습니다. HTML과 동일하며 패키지화되어 있습니다(이해에는 문제가 없습니다).

{{item.name}}

methods: { // 自定义事件 goodsclick(item) { //itemclick就是自定义函数，并且将item也传过去给父组件 this.$emit('itemclick', item) } }

서브 컴포넌트의 완성 스타일입니다. -위 그림과 같이 구성 요소

2 , 다음으로 상위 구성 요소가 하위 구성 요소로부터 맞춤 이벤트를 받는 방법에 대해 설명하겠습니다.

프로그래밍 소개

위 내용은 Vue에서 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 아버지에서 아들로, 아들에서 아버지로 계승되는 방법에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!