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），标示了父元素提供的插槽内容将在哪里被渲染