组件数据传递

之前学的

props:父传子

自定义事件：子传父

props可以实现子传父，因为props传递数据不限制类型，当然也可以传函数，而我们可以利用函数互相携带参数实现子传父（传一个回调函数，emit的底层原理）

父级代码

<template><h3>ComponentA</h3><ComponentB title="标题" :onEvent="dataFn"/>
</template><script>
import ComponentB from "./ComponentB.vue"
export default {data(){return{}},components:{ComponentB},methods: {dataFn(data){console.log(data);}},
}
</script>

子集代码

<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ onEvent('传递数据') }}</p>
</template><script>
export default{data(){return{}},props:{title:String,onEvent:Function}
}
</script>

父级把函数传给子集，子组件调用父级函数，父级再把子组件的值赋给自己的值（本质传指针）

子件B中的template里面

调用 父级，回传数据并显示

说老实话逻辑有点绕

透传Attribute

"透传attribute“指导的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id

当一个组件以单个元素为根作渲染时，透传的attribute会自动被添加到根元素上