Vue 组件之间传参（prop $emit）

Vue 组件之间传参

prop的用法

组件模板： 
// 子组件：（被引用的组件 A引用B  这个地方相当于B）


props: {
    projectinfo: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    flag:{
      type: Boolean,
      default: ()=>{{
        return true
      }}
    }
  },

// 父组件 （引用的组件 A引用B  这个地方相当于A）


            


data () {
    return {
		projectinfo ：[]
	}

props的用法总结：

props是用来 在 被引用的模板也就是组件中 抛出一个自己需要的变量（在父组件中也就是引用它的人给他赋值 ）

声明：  
props : {
   xxx : {
      type: Array,
      default: ()=>{
        return []
      }
   }
}

引用： :xxx="xxx"   :xxx 代表子组件里声明的    "xxx" 代表当前页面里需要给这个自组件赋值的变量 

$emit用法

子组件向父组件传递参数，父组件接收 （可以用作方法的参数）

示例： 分页

// 子组件：


    
methods:{
    changePage(val){   // val 当前页码 （当前页）
      this.$emit('changePage', val)
    }
  }
// 父组件 （调用子组件的页面）


            
 
methods:{
  changePage(size) {
      this.proinfo.pageNum = size
      this.$nextTick(() => {
        this.listCustomerProject(this.proinfo)
      })
    }
}

用法描述 ：子组件中的 @change 为分页中自带的事件

​ changePage 为自定义的方法事件 this.$emit( 参数1，参数2) 参数1 为 父组件要引用的名称 用法：@参数1

$emit传递一个参数时

子组件：

this.$emit('closeChange',false);

父组件：

<组件名  @closeChange="closeCom($event)">   </组件名>
closeCom(msg) {
	this.msg = msg;
}

$emit传递多个参数时：

子组件：

this.$emit('closeChange',false,true);

父组件：

<组件名 @closeChange="closeCom(arguments)">	</组件名>
closeCom(msg) {
	this.msg1 = msg[0];
	this.msg2 = msg[1];
}