史上最全组件传参方式

最新推荐文章于 2023-05-18 17:52:19 发布

CHunQIu12

最新推荐文章于 2023-05-18 17:52:19 发布

阅读量840

点赞数 1

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

本文链接：https://blog.csdn.net/CHunQIu12/article/details/116114142

版权

本文详细介绍了Vue组件间常见的六种通信方式：1. 使用prop进行父传子；2. 通过$emit实现子传父；3. 利用eventBus实现实现兄弟组件间的通信；4. 引入Vuex进行状态管理；5. 使用本地存储存取数据；6. 创建Vue全局变量以共享信息。

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

1.父传子 prop

在父组件的子组件标签绑定一个属性，来进行传输参数

<template>
    <div>
        <h1>父组件</h1>
    	<!-- 子组件标签用绑定属性来传输数据 -->
        <Son :arr="list" />
    </div>
</template>
import Son from '子组件文件路径'
<script scope>
      export default {
   
	      components : {
   
	                Son //注册组件名字和引入子组件起一样的名字用这种
	                   /* Child:Son */  //注册组件名字和引入子组件起不一样的名字用这种
	      },
          data(){
   
            return{
   
                list:['杨梦玥','齐静怡','余晓雯','包明珠','白蕊','王可昕'],
                //list:'EXO'
              }
            }
         }
</script>

在子组件中通过props来接收数据，props可以是一个数组也可以是一个对象，接收过来的数据可以直接使用

<template>
    <div>
        <h1>子组件</h1>
        <!-- props接收过来的数据可以直接拿来使用 -->
        <ul>
            <li v-for="(item,index) in arr" :key="index">{
   {
    item }}</li>
        </ul>
    </div>
</template>
<script scope>
      export default {
   
      	 <!-- props可以是一个数组也可以是一个对象 -->
         props:['arr'],
         //props: {
   
		   //arr: {
   
		      //require: true,
		      //type: String,
		   // },
		 //},
      }
</script>