1.组件数据传递

我们之前讲解过了组件之间的数据传递，props 和 自定义事件 两种方式
props：父传子
自定义事件：子传父
props通过额外方式实现子传父（回调函数）原理：实际上还是父传子 父传给子一个函数 子级实现函数的时候回传了一个数据

<template><h3>ComponentA</h3><ComponentB :title="title" :onEvent="dataFn"/><p>{{ msg }}</p>
</template>
<script>
import ComponentB from './ComponentB.vue'
export default{data(){return{title:"标题",msg:""}},components:{ComponentB},methods:{dataFn(data){console.log(data);this.msg = data;}}
}
</script>
————————————————————————————————————————————————————————————————————————————————
<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ onEvent('传递数据') }}</p>
</template>
<script>
export default{data(){return{}},props:{title:String,onEvent:Function}
}
</script>

2.透传Attributes（了解）

是指传递给一个组件，却没有被该组件声明为props或者emits的attribute或者v-on事件监听器。最常见的例子就是class，style和id当一个组件以单个元素为根作渲染时，透传的attribute会自动被添加到根元素上

禁用Attributes继承

export default{//禁止继承inheritAttrs:false
}

3.插槽slot

我们已经了解到了组件能够接受任意类型的js值作为props，但组件要如何接收模板内容呢？
在某些场景中，可能想要为子组件传递一些模板片段（div，a标签等），让子组件在它们的组件中渲染这些片段

<template><SlotsBase><div><h3>插槽标题</h3><p>插槽内容</p></div></SlotsBase>
</template>
<script>
import SlotsBase from "./components/SlotsBase.vue";export default{components:{SlotsBase}
}
</script>
<style></style>
————————————————————————————————————————————————————————————————————————————————
<template><h3>插槽知识</h3><slot></slot>
</template>

<slot>元素是一个插槽出口（slot outlet），标示了父元素提供的插槽内容将在哪里被渲染