vue中组件间的请求传递方式

原创已于 2022-12-09 14:00:16 修改 · 869 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #bus

于 2022-12-08 21:19:46 首次发布

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍Vue中父组件向子组件、子组件向父组件及兄弟组件间的数据传递方法，包括props、$emit、$on及事件总线的应用。

在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)
    })
}