在vue中父组件传递请求给子组件、子组件传递请求给父组件、兄弟组件之间请求传递如何处理,下面进行简单的分析总结。
组件是vue中非常强大的功能,而组件实例的作用域是相互独立的,一般来说组件间的关系如下:
A和B、A和C是父子关系,B和C是兄弟关系,也可以扩展。
1、父组件传递请求给子组件
父组件A通过props属性的方式向子组件B传递值;
A.vue父组件
<template>
<div id="app">
<B v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
</div>
</template>
<script>
import B from "./components/B"
export default {
name: 'App',
data(){
return{
users:["caocao","liubei","sunquan"]
}
},
components:{
B
}
}
</script>
B.vue子组件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'Hello',
props:{
users:{ //这个就是父组件中子标签自定义名字
type:Array,
required:true
}
}
}
</script>
父组件A通过ref的方式向子组件B传递请求;
// 父组件
<template>
<componentB ref="componentB "></componentB>
</template>
<script>
export default {
mounted () {
this.$refs.componentB.sayHello();
}
}
</script>
// componentB 子组件
export default {
data () {
return {
title: 'Vue.js'
}
},
methods: {
sayHello () {
window.alert('Hello');
}
}
}
2、子组件传递请求给父组件
子组件B使用 $emit派发事件,父组件A使用 $on监听事件;
// 子组件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父组件传值");//自定义事件,传递值“子向父组件传值”
}
}
}
</script>
// 父组件
<template>
<div id="app">
//与子组件titleChanged自定义事件保持一致
<Header v-on:titleChanged="updateTitle"/ >
// updateTitle($event)接受传递过来的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"传递的是一个值"
}
},
methods:{
updateTitle(data){ //声明这个函数
this.title = data;
}
},
components:{
Header,
}
}
</script>
3、兄弟间请求传递
通过事件总线 $bus可以实现任意两个组件间的请求传递, 用 $emit派发事件,用 $on监听事件,包括父子、兄弟;
//派发事件
...
$bus.$emit('Name', res.data, flag)
//监听事件
created() {
$bus.$off('Name')
$bus.$on('Name', (data1, data2) => {
this.method(data1,data2)
})
}