Vue에서 상위 구성요소와 하위 구성요소 간에 어떻게 통신하나요? 다음 기사에서는 Vue 부모와 자식 구성 요소 간의 통신을 이해하고 부모가 자식에게 값을 전달하고 자식이 부모에게 값을 전달하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.
상위-하위 구성요소란 무엇인가요?
컴포넌트에 또 다른 컴포넌트를 도입하는데, 도입된 컴포넌트를 서브컴포넌트라고 합니다. Vue의 모듈화로 인해 공통된 부분은 별도의 모듈로 추출되며, 모든 페이지 내용은 하나의 Vue 아래에 작성되지 않습니다. 파일. , 모듈화로 인해 두 모듈 간의 통신 문제는 피할 수 없습니다. 이때 모듈(구성 요소) 간의 데이터 전송 문제가 있습니다. [관련 추천: "vue.js Tutorial"]
vue에서는 한 컴포넌트가 다른 컴포넌트의 데이터나 메소드를 사용하는 경우가 많습니다. 이때 부모-자식 간 통신이 있습니다. 통신 문제
1. 먼저 코드를 살펴보세요. 설명은 다음과 같습니다.
<body>
//父组件
<div id="app">
<cpn3 :ctitle="title"></cpn3>
</div>
//子组件
<template id="cpn3">
<div>
<h1>{{ctitle}}</h1>
<p>orange</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//子组件
Vue.component("cpn3", {
template: "#cpn3",
// 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
props: {
ctitle: {
type: String,
default () {
return {}
}
}
}
})
//父组件
const app = new Vue({
el: "#app",
data: {
title: 'orange'
},
methods: {},
})
</script>
</body>설명:
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: {},
}) <div id="app">
//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
<cpn3 :ctitle="title"></cpn3>
</div>//子组件
<template id="cpn3">
<div>
//这里的属性名为ctitle
<h1>{{ctitle}}</h1>
</div>
</template>
2. 위 사진을 예로 들어, 부품의 자녀 대 아버지 전달에 대해 이야기해 보겠습니다.
2.1 먼저 하위 컴포넌트와 상위 컴포넌트를 분리해서 하나씩 이야기해보겠습니다. 먼저 하위 컴포넌트 코드를 살펴보겠습니다
<!-- 子组件 -->
<template id="cpn">
<div>
<h1>{{ctitle}}</h1>
<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
</div>
</template>
<script>
Vue.component("cpn", {
template: '#cpn',
//父传子 props
props: {
ctitle: {
type: String,
//找不到数据时
default () {
return {}
}
}
},
data() {
return {
list: [{
id: 'phone',
name: '手机'
}, {
id: 'tv',
name: '电视'
}, {
id: 'p',
name: '家电'
}, {
id: 'computer',
name: '电脑'
}, ]
}
},
//子传父 自定义事件
methods: {
// 自定义事件
goodsclick(item) {
this.$emit('itemclick', item)
}
}
})
</script>설명: 하위 컴포넌트는 컴포넌트(html)를 작성해서 패키징하는 것입니다. 언제든지 사용할 수 있습니다. HTML과 동일하며 패키지화되어 있습니다(이해에는 문제가 없습니다).
1. 하위 구성 요소는 vue 데이터, 메서드, 이 속성과 동일합니다. 따라서 데이터에 배열을 작성한 다음 v-for를 사용하여 탐색하고 버튼을 생성합니다. 일반적인 작성과 다르지 않습니다. 그런 다음 함수를 작성하고 클릭 이벤트를 바인딩한 다음 배열에 전달된 객체인 항목을 함수에 전달합니다.<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>methods: {
// 自定义事件
goodsclick(item) {
//itemclick就是自定义函数，并且将item也传过去给父组件
this.$emit('itemclick', item)
}
}서브 컴포넌트의 완성 스타일입니다. -위 그림과 같이 구성 요소
<!-- 父组件 -->
<div id="app">
<cpn :ctitle="title" @itemclick="cpnclick"></cpn>
</div>
<script>
//父组件
const app = new Vue({
el: "#app",
data: {
title: "title",
},
methods: {
cpnclick(item) {
console.log("cpnclick", item);
}
}
})
</script><cpn :ctitle="title" @itemclick="cpnclick"></cpn>
프로그래밍 소개
를 방문하세요. !위 내용은 Vue에서 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 아버지에서 아들로, 아들에서 아버지로 계승되는 방법에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
