setup 的两个参数(props,context(attrs,slots,emit)),以及用 prop和emit 实现父子组件传值

setup(props,context) {}

props

1. props 里面有父组件向子组件传递的数据，并且是在子组件中使用props接收到的所有属性
2. 包含props配置声明且传入了的所有属性的对象

context (attrs，slots，emit)

1. emit 分发机制
2. slots 插槽 其实就是带有dom属性
3. attrs 父组件的标签可以加各种“属性”， 如果能和props的对应，就变成子组件props的值， 如果对应不上就变成 attrs （不限于函数，各种类型都行）

emit分发机制（多用于点击事件）

需要在其子组件中定义emit事件
emit的传递子组件和父组件的函数名保持一致

.// 子组件 
		// addActive函数名 ，val传递的值
			//  传递单值
	 context.emit('addActive',val)
	 		// 传递多值
	 	context.emit('addActive',val1,val2,val3)
	 	or
	 	context.emit('addActive',[val1,val2,val3])

//父组件

	<Child @addActive="addActive"></Child>
	const addActive = (val:any) =>{
	console.log(val)
		// val
		// val1,val2,val3
		//[val1,val2,val3]
	}
// 如果传递是，父组件有自定义的值时，

<Child @addActive = "addActive('100',...val)"></Child>
const addActive=(...val)=>{
console.log(val)
	// 100,[val1,val2,val3]
}

slots 插槽 的用法(一个组件里可以有多个插槽)

默认插槽（组件未定义名字的插槽）

	// 调用组件时
		<Porject :project="project" :goodsId="goodsId">
        <template>
          <span>默认插槽</span>
        </template>
      </Porject>
     // 书写组件时
     <slot></slot>

1. 父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。即具名插槽用name属性来表示插槽的名字，不传为默认插槽

2. 如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就不会填充到子组件的任何一个插槽中。

3. 如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会且全都填充到子组件的每个默认插槽中。

具名插槽(有具体的名称)

组件调用时

<Porject :project="project" :goodsId="goodsId">
        <template v-slot:content>
          <span>插槽~~~~</span>
        </template>
      </Porject>

书写组件时

<slot name='content'>
//  name 要与组件调用时的 v-slot 的保持一致

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容

调用组件时

<porject :project="project" :goodsId="goodsId">
        <template v-slot:footer="message">
          <span>{{message.vilolat}}</span>
        </template>
      </porject>

书写组件时

 <slot name="footer" :vilolat="project.platform"></slot>

attrs

项目中有多层组件传参可以使用attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。如果使用普通的父子组件传参prop和emit，on会很繁琐；如果使用vuex会大材小用，只是在这几个组件中使用，没必要使用vuex；使用事件总线eventBus，使用不恰当的话，有可能会出现事件多次执行

inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其contetxt.attrs可以获取到没有使用的注册属性, inheritAttrs: false是不会影响 style 和 class 的绑定

父组件

// 父组件
<Child :fatherData="fatherData"></Child>

// 子组件
<div class="child">
	<GrandChild v-bind="context.attrs"></GrandChild>
</div>
// 孙子组件(必须用props接受传过来的数据)
<div class="grand-child"></div>
props:{
	fatherData:{
		required:true,
		type:Object
	}
}