史上最全组件传参方式

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>

2.子传父 $emit( )

在父组件组件的标签上自定义一个事件，调用相应的方法

<template>
    <div>
        <h1