Vue 컴포넌트에서 값을 전달하는 5가지 방법은 무엇입니까?
- 青灯夜游원래의
- 2021-10-27 16:16:2556465검색
vue 구성 요소에서 값을 전달하는 5가지 방법: 1. 상위 구성 요소가 하위 구성 요소에 값을 전달합니다. 3. 인접한 형제 구성 요소 간에 매개 변수가 전달됩니다. 5. EventBus를 통해 매개변수를 전달합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
Vue의 통신 방법은 매개변수 전달 방법이라고도 할 수 있습니다.
상위 구성 요소가 하위 구성 요소에 값을 전달합니다.
하위 구성 요소가 상위 구성 요소에 값을 전달합니다.
-
인접 형제 컴포넌트 형제(형제) 간에 매개변수 전달
먼 형제(사촌)로부터 매개변수 전달
EventBus 매개변수 전달
1. 아버지에서 아들로 매개변수 전달
원리: 부모 제어 하위 구성 요소 속성의 소품을 통해 하위 구성 요소의 사용자 정의 레이블 속성을 던져 상위 구성 요소의 작업 상태를 수신합니다
예: 상위 구성 요소의 버튼은 하위 구성 요소에서 p의 표시 및 숨기기를 제어합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<!-- 这里的app范围就是 子组件son 的父级 -->
<div id="app">
<button @click='change'>父按钮</button>
<hr>
<!-- ********** 自定义标签属性test,接收父级的state ************-->
<son :test='state'></son>
</div>
<template id="tp1">
<div>
<!-- ************ 调用自定义属性test **************-->
<div v-show='test'>我是子组件的div</div>
</div>
</template>
<script src="../vue/vue.js"></script>
<script>
// 局部定义 子组件son
new Vue({
el:"#app",
data:{
state:true
},
methods:{
change(){
this.state = !this.state;
}
},
components:{
son:{
template:"#tp1",
//*********** 抛出自定义标签属性 ***************
props:['test']
}
}
})
</script>
</body>
</html>효과 :
2. 부모에서 자식으로 매개변수를 전달하는 원리
: 자식이 부모를 제어하고, 자식 컴포넌트가 커스텀 이벤트를 바인딩하여 부모 컴포넌트의 메소드 기능을 처리하고, 를 통해 자체적인 커스터마이징을 실행합니다. $emit('custom event', [parameter]) 이벤트
예: 하위 구성 요소의 버튼은 상위 구성 요소의 p 표시 및 숨기기를 제어합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<div id="app">
<c1></c1>
</div>
<!-- 父组件c1 子组件c2 子组件自定义事件test-->
<template id="c1">
<div>
<div v-show='state'>father显示/隐藏</div>
<hr>
<!--************ 子组件c2自定义事件,执行父组件c1的方法函数change_f ***************** -->
<c2 @test='change_f'></c2>
</div>
</template>
<template id="c2">
<div>
<button @click='change_son'>子按钮</button>
</div>
</template>
<!-- 引入Vue.js框架文档，可在官方文档下载-->
<script src='../vue/vue.js'></script>
<script>
//全局定义
// 实例化 父组件c1
Vue.component("c1",{
template:"#c1",
data(){
return {
state:true
}
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
// 实例化 子组件c2
Vue.component("c2",{
template:"#c2",
methods:{
change_son(){
// ************ 在子组件方法里，触发子组件自定义事件 ******************
this.$emit("test")
}
}
})
//实例化一个Vue对象
new Vue({
el:"#app"
})
</script>
</body>
</html>효과:
3. 인접한 형제로부터 매개 변수 전달 (형제)
원리: 공개 부모를 통해 요소는 부모-자식 소품 매개변수 전송 및 자식-부모 맞춤 이벤트와 결합된 브리지(인스턴스 구성 요소) 역할을 합니다.
예: c1과 c2는 형제 관계를 제어할 수 있습니다. c2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>
<body>
<div id="app">
父级状态
<p>{{state}}</p>
<hr>
<c1 @test_c1='change_f'></c1>
<hr>
<c2 :test_c2='state'></c2>
</div>
<template id="c1">
<div>这里是c1组件
<button @click='change_c1'>c1按钮</button>
</div>
</template>
<template id="c2">
<div>这里是c2组件,状态：{{test_c2}}
<div v-show='test_c2'>我是c2中的div</div>
</div>
</template>
<script src='../vue/vue.js'></script>
<script>
Vue.component("c2",{
template:"#c2",
props:['test_c2']
})
Vue.component("c1",{
template:"#c1",
methods:{
change_c1(){
this.$emit("test_c1")
}
}
})
new Vue({
el:"#app",
data:{
state:true
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
</script>
</body>
</html>의 요소 표시 및 숨기기 효과:
4. 먼 형제(사촌)로부터 매개변수 전달
원리: 중간 인스턴스를 생성하고 제어되는 구성 요소에 이벤트를 등록하여 실행은 이벤트를 통해 이루어지며, 메인 컨트롤 컴포넌트에서는 이벤트를 통해 해당 동작이 변경됩니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
这是父组件
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
{{name}}
<button @click='click_son1'>触发angle中间事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>
<script src='../vue/vue.js'></script>
<script>
//********** 创建一个angle实例，作为中间变量(全局) **************
let angel = new Vue();
new Vue({
el:"#app",
components:{
father:{
template:"#father",
components:{
son1:{
template:"#son1",
data(){
return {
name:"我是son1"
}
},
methods:{
click_son1(){
// *************** 通过angel注册的test事件，修改son2中name的值 ************
angel.$emit('test','哈哈！修改成功！')
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自动执行，组件准备ok就可用
mounted(){
// *************** 通过angel注册的test事件，将son1的修改方法传过去 ************
angel.$on('test',this.change)
}
}
}
}
}
})
</script>
</body>
</html>효과:
클릭 전:
클릭 후:
5. EventBus 전달 매개변수
1. main.js
Vue.prototype.$EventBus = new Vue()에 전역 EventBus를 마운트합니다.
2. A 구성 요소
<template>
<div class="wrap">
<div>我是组件A</div>
<button @click="sendMsg">发送</button>
</div>
</template>
<script>
export default {
name: "A",
methods:{
sendMsg(){
this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")
}
}
}
</script>3.B 구성 요소
<template>
<div>
<div>我是组件B</div>
</div>
</template>
<script>
export default {
name: "B",
mounted(){
this.$EventBus.$on('sendMsg',(msg)=>{
console.log(msg);//这是组件A发送的消息！
})
},
}
</script>는 전역 Vue 개체를 마운트하여 매개 변수를 전달합니다.
관련 추천: "vue.js Tutorial"
위 내용은 Vue 컴포넌트에서 값을 전달하는 5가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：vuejs에서 eslint를 삭제하는 방법다음 기사：vuejs에서 eslint를 삭제하는 방법