vue - 父子组件之间的传值以及非父子组件之间的传值

最新推荐文章于 2024-07-12 21:26:02 发布

紫菀檀ss

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量538

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/95604423

版权

本文详细介绍了Vue中父子组件及非父子组件之间的通信方法。通过props实现父组件向子组件传值，利用$emit进行子组件向父组件的传值。对于非父子组件，可以通过事件总线（Event Bus）或者Vuex状态管理来传递信息。文章通过具体代码示例进行了清晰的阐述。

摘要由CSDN通过智能技术生成

父子组件传值在项目中非常常用的，一般遇到一样的模块，我们都会考虑做成一个公共组件，多个页面一起使用。同时，我们偶尔也会遇到非父子组件传值这种情况。下面我来介绍一下它们之间是怎么传值的。

1、父组件向子组件传值

父组件向子组件传值时，子组件是通过 props 来接收父组件传递过来的参数的，下面举个例子：

子组件：

		       <template>
		        <div id="banner" class="headers">
		            <header class="bar-nav">
		                <h1 class="m-title">{
  {title}}</h1>
		            </header>
		        </div>
		    </template>
		    <script>
		        export default {
		            data() {
		                return { };
		            },
		            props: {
		            	title: {
			                type: String
			            }
		            }
		        };
		    </script>

父组件：