Vue知识点：组件之间的通信

最新推荐文章于 2024-08-09 18:48:50 发布

阿夏呀

最新推荐文章于 2024-08-09 18:48:50 发布

阅读量301

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/summer_cloudy/article/details/125442233

版权

本文探讨了Vue.js中组件间通信的三种常见方式：通过props从父组件向子组件传递值，使用$emit实现子组件向父组件的通信，以及在没有直接父子关系时如何传递数据。详细介绍了各种场景下的应用和实践。

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

父子组件传值（props/$emit）：

-  父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit,
   A 组件中 v-on 的方式实现。


 1. 父组件向子组件传值 （父组件 => 子组件）
    - `父组件`
    <template>
	    <div id="app">
	        <HelloWorld :img-data="imgData" /> // 父传子 左侧用中划线‘-’和小写与右侧区分
	    </div>
	</template>
	
	<script>
	    import HelloWorld from './components/HelloWorld.vue'
	
	    export default {
   
	        name: 'app',
	        components: {
   
	            HelloWorld
	        },
	        data() {
   
	            return {
   
	                imgData:{
   
	                    name: '测试组件通信-- 父传子' //父组件要传递的数据
	                }
	            }
	        },
	    }
	</script>
	
	 - `子组件`
	 <template>
	    <div class="hello">
	        <div>{
   {
   imgData.name}}</div> //子组件接收父组件数据后应用
	    </div>
	</template>
	
	<script>
	export default {
   
	    name: 'HelloWorld',
	    //子组件通过props接收父组件数据
	    props: {
   
	        imgData: {
   
	            type: Object,
	            default: ()=> {
   },
	        }
	    },
	    data() {
   
	        return {
   
	
	        }
	    },
	    mounted() {
   
	        console.log(this.imgData); //打印可以看到父组件数据
	    },
	}
	</script>


2. 子组件向父组件传值 （子组件 => 父组件）
   - `子组件`- 发射事件/数据
   <script>
	export default {
   
	    name: 'HelloWorld',
	    data() {
   
	        return {
   
	        }
	    },
	    mounted() {
   
	        this.$emit('change','我生成啦，123') //子组件通过$emit发射事件
	        //语法：$emit('参数1'，'参数2');
	        //参数1:是父组件中监听子组件的方法，参数2:是要传递给父组件的数据
	    },
	}
</script>

- `父组件`- 接收/感知
    <template>
	    <div id="app">
	        <HelloWorld @change="change" /> //监听子组件 
	    </div>
	</template>
	
	&l