一.父组件向子组件传递函数
父组件:
<template>
<a_son :onevent="dataFn" title="新的传递"/>
<p>{{msg}}</p>
<p>a的父亲</p>
</template>
<script>
import a_son from "@/components/a.vue"
export default {
name: "a_father",
data(){
return{
msg:''
}
},
components:{
a_son
},
methods:{
dataFn(data){
this.msg=data
}
}
}
</script>
<style >
</style>
子组件:
<template>
<p>儿子a</p>
<p>{{ title }}</p>
<p>{{ onevent("我是新的数据") }}</p>
</template>
<script>
export default {
name: "a_son",
props: {
title: String,
onevent: Function
}
}
</script>
<style scoped>
</style>
父组件向子组件传递了一个函数，然后通过props来接收函数，并且调用了这个函数，重新传递给了父组件，接着，将参数数据重新赋值给"msg"参数，并进行展示
二.插槽slot
const message="插槽内容"
</script>
<template>
<!-- <p ref="pElementRef">hello</p>-->
<!-- <listdemo/>-->
<!-- <computed/>-->
<!-- <classdemo/>-->
<!-- <styledemo/>-->
<!-- <watchdemo/>-->
<!-- <domdemo/>-->
<!-- <parent/>-->
<!-- <a_father/>-->
<slotdemo>
<div>{{message}}</div>
<p>插槽测试</p>
</slotdemo>
</template>
这里是template的内容，接着看slotdemo的内容
<template>
<slot>如果你不传递任何内容，将会显示这个内容</slot>
</template>
<script>
export default {
name: "slotdemo"
}
</script>
<style scoped>
</style>
我们可以理解为将整个内容放到一个盒子里面，然后这整个盒子被传送到了你的组件，放在了slot标签所在的位置，并且，如果你不传递任何内容，你在标签中写的值就会成为默认值(见上)
三.具名插槽
<template>
<div>
<slot name="header"></slot>
<div>子组件的内容</div>
<slot name="footer"></slot>
</div>
</template>
<!-- 父组件 -->
<template>
<div>
<child-component>
<template v-slot:header>
<!-- 父组件提供的头部内容 -->
<h1>这是头部</h1>
</template>
<!-- 父组件提供的默认内容 -->
<template v-slot:footer>
<!-- 父组件提供的底部内容 -->
<p>这是底部</p>
</template>
</child-component>
</div>
</template>
在前面的template中用关键词v-slot来给插槽取名字，然后在传递的时候用关键词name来确定插槽能够一一对应"v-slot:"也可以用 #代替
四.作用域插槽
使用作用域插槽可以让子组件接收父组件传递的数据，并在插槽内使用。在子组件中，通过
<slot> 元素的 v-bind 属性来绑定数据，父组件使用 v-slot 指令来接收数据。
